JS 与Flex交互:html中的js 与flex中的actionScript通信
Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容。
Flex 与JavaScript 交互,主要依靠Flex的ExternalInterface,其提供了addCallBack和call方法。
一.Html页面嵌套Flex
html嵌套Flex需要用到swfobject.js,下载网址http://code.google.com/p/swfobject/
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)为js加载flex的方法。
详细请看:http://blog.csdn.net/allen_oscar/article/details/9744265
如下:
<!DOCTYPE HTML PUBLICd "-//W3C//DTD HTML 4.000%1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS与Flex交互</title> <script type="text/javascript" src="lib/interaction.js"></script>
<script type="text/javascript" src="lib/swfobject.js"></script> <script> var jsApp; function init(name){
this.name = name;//name="flexDiv" flexDiv为 html页面中 <div id="flexDiv">/div>< 的id
var flashvars = {};
var params = {};
attributes = {};
params.allowScriptAccess = "always";//安全沙箱
params.scale = "nocale";
swfobject.embedSWF("http://192.168.1.102:8088/FlexApp/FlexApp.swf", name,"100%","100%", "10.2.0", "", flashvars, params, attributes);
} </script>
</head>
<body onload="init("flexDiv")" width="100%" height="100%">
<div> <label> Flex说:</label> <input id="flexSay" /> <input id="jsinput" value="你好Flex" /> <button >Send</button> </div>
<table width="100%" height="100%">
<td> <div id="flexDiv" width="100%" height="100%" style="display:block">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
</td>
</table>
</body> </html>
二.JavaScript与Flex交互
Flex 与JavaScript 交互,主要依靠Flex的ExternalInterface,其提供了addCallBack和call方法。
ExternalInterface.addCallback("onHello",onHelloFlex);//onHello 为javascript中的方法
ExternalInterface.call("flexCall",flex.text);//调用javascript中的flexCall()方法
ExternalInterface还提供了一些其他的方法:
ExternalInterface.available//对浏览器支持的检查
Security.allowDomain("*"); //允许调用SWF文件中的属性和变量
Security.allowInsecureDomain("*");
三.代码示例
JSApp.html
<!DOCTYPE HTML PUBLICd "-//W3C//DTD HTML 4.000%1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图接口</title> <script type="text/javascript" src="lib/interaction.js"></script>
<script type="text/javascript" src="lib/swfobject.js"></script> <script> var jsApp; function init(){ jsApp = new LoadFlex("flexDiv");//创建对象 } function sendJS(){ try{ var str = document.getElementById('jsinput').value; jsApp.jsToFlex(str); } catch(e){
alert(e.message);
} } </script>
</head>
<body onload="init()" width="100%" height="100%">
<div> <label> Flex说:</label> <input id="flexSay" /> <input id="jsinput" value="你好Flex" /> <button onClick="sendJS()">Send</button> </div>
<table width="100%" height="100%">
<td> <div id="flexDiv" width="100%" height="100%" style="display:block">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</div>
</td>
</table>
</body> </html>
interaction.js
function LoadFlex(name){ this.name = name;
var flashvars = {};
var params = {};
attributes = {};
params.allowScriptAccess = "always";
params.scale = "nocale";
swfobject.embedSWF("http://192.168.1.102:8088/FlexApp/FlexApp.swf", name,"100%","100%", "10.2.0", "", flashvars, params, attributes); this.GetFlex = function(){ var mapName = this.name;
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[mapName];
}else {
return document[mapName];
} } this.jsToFlex = function(str){
try{ var str = this.GetFlex().onHello(str); } catch(e){
alert(e.message); }
} } function flexCall(str){ // alert(str);
document.getElementById("flexSay").value =str
}
FlexApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
applicationComplete="init()" creationComplete="oninit()" initialize="oninit()"
viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[ import flash.external.ExternalInterface;
import flash.system.Security; import mx.controls.Alert;
import mx.events.FlexEvent;
public function oninit():void{ } public function init():void{ Security.allowDomain("*"); //允许调用SWF文件中的属性和变量
Security.allowInsecureDomain("*"); if (ExternalInterface.available)
{
try{ ExternalInterface.addCallback("onHello",onHelloFlex);//onHello 为javascript中的this.GetFlex().onHello(str); }
catch(error:Error){ Alert.show(error.message);
} }
} public function onHelloFlex(str:String):String{ js.text = str; return "你好javaScript";
} public function onFlexToJS(ste:String):void{ ExternalInterface.call("flexCall",flex.text);//调用javascript中的flexCall()方法 }
]]>
</fx:Script> <fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations> <mx:VBox width="100%" height="100%" horizontalAlign="left" verticalAlign="middle" backgroundColor="#EAE3E3">
<s:Panel width="100%" height="500" chromeColor="#1E1E1E" title="javascript and flex 交互" color="#FCF9F9" fontWeight="bold" fontSize="14">
<mx:VBox height="100%" width="100%">
<mx:HBox height="100%">
<mx:HBox width="270" height="200" paddingTop="10">
<s:Label color="#080808">javaScript说:</s:Label> <s:TextInput id="js" color="#020202"/>
</mx:HBox>
<mx:HBox width="380" height="200" paddingTop="10">
<s:Label color="#060606">Flex说:</s:Label> <s:TextInput text="你好javaScript" id="flex" color="#020202"/>
<mx:Button click="onFlexToJS('hell')" label="send"/>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</s:Panel>
</mx:VBox> </mx:Application>
四:图片示例
1.初始化页面
2.点击html页面Send,通过调用this.GetFlex().onHello(str);方法-----》ExternalInterface.addCallback("onHello",onHelloFlex)---》public function onHelloFlex(str:String):String。
3.点击flex页面Send,public function onFlexToJS(ste:String):void--》ExternalInterface.call("flexCall",flex.text)--》function flexCall(str)。
最新文章
- 面向对象相关知识点xmind
- redis分片
- python smtp 群发邮件
- file-loader及url-loader的使用
- AsyncTask
- rpc框架: thrift/avro/protobuf 之maven插件生成java类
- php瀑布流,把一个数组分4个数组,按照时间排序
- OpenGL大作业
- mac 启动 docker daemon
- Eclipse控制台输出信息的控制
- 前端相关的seo技术
- 自定义事件实现不同窗体间的通讯Delphi篇
- UML类图常见的几种关系
- html 知识
- PAT 输出华氏-摄氏温度转换表
- ThreadPoolExecutor 入参 corePoolSize 和 maximumPoolSize 的联系
- 洛谷P3384 【模板】树链剖分
- webapi研究说明
- 安卓开发_深入理解Handler消息传递机制
- 数据库并发事务控制四:postgresql数据库的锁机制二:表锁 <;转>;
热门文章
- [实战]MVC5+EF6+MySql企业网盘实战(17)——思考2
- jquery 上传图片自由截取
- 定期删除30天以前的elasticsearch的日志
- 转:xxe attack学习
- bean的singleton(没有看到生命周期范围??)
- 洛谷P3203 [HNOI2010] 弹飞绵羊 [LCT]
- SpringMVC框架 之 from标签(转)
- maven spring整合mybatis是使用junit测试报字节序列的错误
- FastReport.Net使用:[10]报表栏目说明
- SPOJ1811 &;&; SPOJ1812