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交互的方式可能会有好多种,但是以上两个是我在近期与客户系统对接中使用到的两种,感觉比较简单易用,在此总结分享也是希望大家在进行相应的工作中可以参考。