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" => ...
随机推荐
- jQuery子页面获取父页面元素并绑定事件
父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li ...
- VMware Workstation:安装windows xp系统
https://blog.csdn.net/nicergj/article/details/83651603
- centos7搭建Cisco上网方式
1.下载脚本 wget https://git.io/vpnsetup-centos -O vpnsetup.sh 2.修改 vi vpnsetup.sh 替换为你自己的值: YOUR_IPSEC_P ...
- (PMP)第4章-----项目整合管理
4.1 制定项目章程 输入 工具与技术 输出 1.商业文件 (商业论证,效益管理计划) 1.专家判断 1.项目章程 2.协议 2.数据收集 (头脑风暴,焦点小组,访谈) 2.假设日志 3.事业环境因素 ...
- getElementById和$()获取值一点注意事项
<script type="text/javascript"> window.onload = function () { var obj = document.get ...
- memcache启动报错:memcached: error while loading shared libraries: libevent-XXXXX5: cannot 。。。。
创建连接 ln -s /usr/lib/libevent-2.1.so.6 /usr/lib/libevent-2.1.so.6 如果还不行就下面解决 执行下面语句查看链接地址 LD_DEBUG=l ...
- 深入Java集合学习系列:LinkedHashMap的实现原理
参考下面链接: http://zhangshixi.iteye.com/blog/673789
- django2+python3+uwsgi+centos7部署网站
Centos7中安装Python虚拟环境 2018年08月27日 00:09:36 kaichenkai 阅读数:984 1.为什么要搭建虚拟环境? 问题:如果在一台电脑上, 想开发多个不同的项目, ...
- 下载安装配置Maven
下载安装Apache Maven 1.Maven官网下载jia包:http://maven.apache.org/download.cgi 2.将文件解压到D:\Program Files\apach ...
- weblogic.xml 精妙设置
1.一:weblogic 页面访问速度比tomcat慢的原因和解决办法 一:weblogic 页面访问速度比tomcat慢的原因和解决办法 公司有个项目,部署在weblogic8.1上之后,发现比在t ...