Flex(ActionScript)与JavaScript交互的两种方式示例
随着各单位部门信息化进程的不断发展,互通互联、共享协调不断的被越来越多的客户所重视。很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接。今天跟大家分享的是系统对接中ActionScript与JavaScript实现交互的两种方式,希望能够给大家的工作和学习带来一点帮助。
A.ExternalInterface
Flex提供的ExternalInterface 类包含了两个静态属性和两个静态方法。这些属性和方法可用于获取有关外部接口连接的信息,从 ActionScript 执行容器中的代码,以及使 ActionScript 函数可供容器调用。
ExternalInterface.available 属性指示当前的 Flash Player 是否位于提供外部接口的容器中。如果外部接口可用,则此属性为 true;否则,为 false。在使用 ExternalInterface 类中的任何其他功能之前,应始终进行检查以确保当前容器支持外部接口通信,如下所示:
if (ExternalInterface.available) { // Perform ExternalInterface method calls here. }
假设,现在需要将Flex开发完成的GIS模块与现有的ASPX或者JSP等网站系统进行集成的话。相信大家一定会想到 swfobject。对的通过 swfobject可以将编译好的Flex应用程序嵌入到已有系统的相应页面中来。
方法如下:
swfobject.embedSWF("ArcGIS/Flex/gis.swf", "map_canvas", "100%", "100%", "9.0.0", "flashplayer/expressInstall.swf", flashvars);
主要参数第一是内嵌的编译后程序(gis.swf)、内嵌位置(id为map_canvas的div)、容器尺寸参数、FlashPlayer的版本、缺失的提示、传入参数等。
下面我们来说说,内嵌后系统的交互问题。首先,如果已有的业务系统需要传递参数调用GIS模块的方法,如何操作呢?ExternalInterface的addCallback方法可以实现外部容器对Flex内部方法的访问。需要做的就是要在Flex中将相应的方法进行注册即可。操作如下:
ExternalInterface.addCallback("flexFun",doFunfromJS);
如上注册后,在业务系统就可以来使用注册的函数名flexFun进行交互了,操作方法如下:
function getCoordinate(qyId) {
if (qyId != "-1") {
document.getElementById('map_canvas').flexFun("1",qyId);
} else {
alert("未查找到该企业坐标");
} }
值得注意的是这种方式需要等待编译好的swf在容器中加载完成后才能调用相应的方法,否则会提示错误,可以通过添加判断来避免。
另外ExternalInterface还提供一个方法call可以用来调用容器之外的方法,如调用javaScript的方法。操作方式比较简单:
ExternalInterface.call("jsfun",resultAS.toString());
其中,jsfun为javaScript中的函数名,resultAS为传入参数。
function jsfun(result){ var rs = document.getElementById("result");
rs.value = "查询结果:" + '\n' + result;
}
通过这种方式就可将GIS模块中的Flex查询结果返回给的业务系统。
B.FlexGlobals
另外FlexGlobals类也可以实现简单单向参数传递。FlexGlobals.topLevelApplication.parameters可以获取业务系统的相应参数来进行相应的初始化或者进一步的工作。
业务系统参数传递,操作如下:
<script type="text/javascript">
var flashvars = {};
flashvars.QY_id = <% =Request["ID"] %>;
swfobject.embedSWF("ArcGIS/Flex/update.swf", "map_canvas", "100%", "100%", "9.0.0", "flashplayer/expressInstall.swf",flashvars);
</script>
如上就可以将业务系统中的企业id传递给Flex的GIS模块进行初始化,Flex代码如下:
var jsParams:Object=FlexGlobals.topLevelApplication.parameters;
qy_id=jsParams["QY_id"];
var where:String="QY_id ="+qy_id;
queryOnResult(where);
总结:实现ActionScript与JavaScript交互的方式可能会有好多种,但是以上两个是我在近期与客户系统对接中使用到的两种,感觉比较简单易用,在此总结分享也是希望大家在进行相应的工作中可以参考。
Flex(ActionScript)与JavaScript交互的两种方式示例的更多相关文章
- Android中H5和Native交互的两种方式
Android中H5和Native交互的两种方式:http://www.jianshu.com/p/bcb5d8582d92 注意事项: 1.android给h5页面注入一个对象(WZApp),这个对 ...
- 总结javascript继承的两种方式的N中写法
最近翻看博客园,总结了一下javascript的继承方式:prototype和copy继承方式. 一.prototype方式 当一个函数被创建时,Function构造函数产生的函数会隐式的被赋予一个p ...
- javascript 继承的两种方式
js中继承可以分为两种:对象冒充和原型链方式 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 代码如下: function Person(name){ t ...
- [Flex] IFrame系列 —— 嵌入本地页面两种方式source和content(html页面和html代码)
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- js-使用JavaScript、jQuery两种方式实现全选/全不选
html代码 <input type='checkbox' value="10" name="frust"/>苹果10元 <br/> & ...
- 模块化Javascript代码的两种方式
1.将模块整体放在函数里 function buildMonthNameModule() { var names = ["January ", "February&quo ...
- Nginx和php交互的两种方式
Unix socket 也叫IPC socket 也就是进程间通信套接字用于同一台主机上的不同进程间交换数据 TCP socket IP socket要利用主机的传输层(tcp),可以用于同一台主机 ...
- JavaScript输出的两种方式
var a="Hello World" document.write(a) //在网页上输出:Hello World var a="Hello World" c ...
- php对数组遍历的两种方式示例
在对 php 数组遍历时,一般经常使用 foreach 来遍历,很少用 while 来遍历,在下面的代码中作一个对比. <?php $content = ["ID" => ...
随机推荐
- IMPLEMENTATION - Entity Framework Anti Pattern - High Performance EF
Good about ORM Developer is free from building T-Sql on the database tier which is not their major a ...
- bugku题目“cookie欺骗”
先上成功截图 题目写的cookie欺骗,但其实是一道考察写脚本能力和代码审计类的题目,首先观察开始的页面 可以看到只有这一串字母,粗略观察可以认为这绝对不是密码,而是胡乱写上的字符,在观察页面源代码后 ...
- 修改maven的源地址为阿里源
在放maven的安装文件里,找到settings.xml,如下图所示 将默认的源地址改为阿里源,需要在settings.xml文件相应的位置上加上如下的一串: <mirror> < ...
- 数据库基础 RDBMS、NoSQL
- arm linux和windows 使用tftp传文件
一.在windows 安装tftp客户端 链接:https://pan.baidu.com/s/1sxNciX337DObVmGJmCxICw 提取码:hzvj 在客户端新建一个tftp文件夹 二.关 ...
- 使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
- java 调用 api接口
/* * Copyright 2018 textile.com All right reserved. This software is the * confidential and propriet ...
- log4j日志的使用
1.引架包和导配置文件log4j.properties <dependency> <groupId>org.slf4j</groupId> <artifact ...
- cisco基本配置命令
实验命令 router> enable 从用户模式进入特权模式 router# disable or exit 从特权模式退出到用户模式 router# show sessions 查看本机上的 ...
- nmap 介绍
原文地址:http://drops.wooyun.org/tips/2002 原文地址:http://infotechbits.wordpress.com/2014/05/04/introductio ...