當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS 与Flex交互:html中的js 与flex中的actionScript通信

發布時間：2023/12/19 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><? 的idvar 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 οnlοad="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 οnlοad="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

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)。

總結

以上是生活随笔為你收集整理的JS 与Flex交互:html中的js 与flex中的actionScript通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： VirtualBox 虚拟机的网络设置
下一篇： gradle idea java ssm