mxml頁面:
<?xml version="1.0" encoding="utf-8"?> <s: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" width="100%" height="100%" xmlns:code="http://code.google.com/p/flex-iframe/" creationComplete="initApp()"> <fx:Declarations> <!-- 將非可視元素(例如服務、值對象)放在此處 --> </fx:Declarations> <fx:Script> <![CDATA[ import flash.external.*; //引入ExternalInterface public function initApp():void { ExternalInterface.addCallback("myJsFunction",myAsFuncn); button.addEventListener(MouseEvent.CLICK,buttonClick); } public function myAsFuncn(js:String):String { return "js:"+js+"訪問了as:"+asInput.text; } private function buttonClick(event:MouseEvent):void { trace(asInput.text); label.text = "as 調用 js ..."; var result:String = callJS(asInput.text); label.text = "傳回值:" + result; } private function callJS(arg:String):String { return ExternalInterface.call("jsMethod",arg); } private function asMethod(arg:String):String { label.text = arg; return "js 調用了 as 成功!"; } ]]> </fx:Script> <s:VGroup width="100%" height="100%"> <s:VGroup width="100%"> <mx:Button x="169.5" y="162" label="點擊" fontSize="14" id="button"/> <mx:TextInput id="asInput" x="122" y="76"/> <s:Label id="label"/> </s:VGroup> </s:VGroup> <code:IFrame source="MyHtml.html" width="500" height="500"/> </s:Application>
html頁面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script language="JavaScript"> function callAs( ) { var myFlexfun=document.getElementById("myFlexFun"); var result=myFlexfun.myJsFunction(jsinput.value); alert(result); mess.value=result; } function jsMethod(arg) { alert("as 調用 js 成功,參數為:" + arg); return ("as 調用 js 成功!"); } </script> </head> <body> <table> <tr> <td> <object id= "myFlexFun" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="300"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <embed src="test.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed> </object> </td> </tr> <tr> <td> <input type="input" id="jsinput"/> <input type="button" value="點我看效果" onclick="callAs()"/> <input type="input" id="mess"/> </td> </tr> </table> </body> </html>
如果試過以上的方法,會發現在被嵌入的Html見面中又嵌入了一個父級的swf檔案,如下
這種情況顯然不是我想要的結果。於是修改下代碼,如下:
mxml頁面
<?xml version="1.0" encoding="utf-8"?> <s: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" width="100%" height="100%" xmlns:code="http://code.google.com/p/flex-iframe/" creationComplete="initApp()"> <fx:Declarations> <!-- 將非可視元素(例如服務、值對象)放在此處 --> </fx:Declarations> <fx:Script> <![CDATA[ import flash.external.*; import mx.controls.Alert; import mx.rpc.events.ResultEvent; //引入ExternalInterface public function initApp():void { ExternalInterface.addCallback("sayCallBack",callBack); } public function callBack(str:String):String{ return "Hello "+str; } protected function button1_clickHandler(event:MouseEvent):void { ExternalInterface.call('sayHelloWorld',' Jim'); var array:Array = new Array(); array.push("a", "b","c","d","e"); myIFrame.callIFrameFunction('jsMethod',array,function(str:String):void{ label.text=str; }); } public static function str():String{ return "aaa"; } ]]> </fx:Script> <s:VGroup width="100%" height="100%"> <s:BorderContainer width="100%" height="300" backgroundColor="#00ffaa"> <s:HGroup width="100%"> <s:Button label="調用js" click="button1_clickHandler(event)"/> <mx:Button x="169.5" y="162" label="點擊" fontSize="14" id="button"/> <mx:TextInput id="asInput" x="122" y="76"/> <s:Label id="label"/> </s:HGroup> </s:BorderContainer> <s:BorderContainer width="100%" height="300"> <code:IFrame id="myIFrame" source="com/MyHtml.html" width="100%" height="100%"/> </s:BorderContainer> </s:VGroup> </s:Application>
html頁面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script language="JavaScript"> function callAs( ) { var ifrm =window.parent.xiSwfUrlStr; if (ifrm) { alert(ifrm); }else{ alert('false'); } } function jsMethod(arr) { alert("as 調用 js 成功,參數為:"+arr[4]); return ("as 調用 js 成功!"); } function callA(){ var str=window.parent.document.getElementById("test").sayCallBack("Bill"); if (str) { alert(str); mess.value=str; }else{ alert('false'); } } </script> </head> <body> <table> <tr> <td > <object id= "myFlexFun" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"> <param name="movie" value="../test.swf" /> <param name="quality" value="high" /> </object> </td> </tr> <tr> <td> <input type="input" id="jsinput"/> <input type="button" value="點我看效果" onclick="callA()"/> <input type="input" id="mess"/> </td> </tr> </table> </body> </html>
這樣,html的js指令碼就可以直接調用as指令碼,而不需要再次嵌入swf檔案。
以上所述是小編給大家介紹的Actionscript與javascript互動執行個體程式(修改),希望對大家有所協助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援!