flex 之JavaScript 跟ActionScript互通
flex 之JavaScript 和ActionScript互通
注:原创作品,分享以供交流学习,转载请注明出处。
JavaScript和flex互通全是通过ExternalInterface 这个接口。
ExternalInterface 类是外部 API,这是一个在 ActionScript 和 Flash Player 容器之间实现直接通信的应用程序编程接口,例如,包含 JavaScript 的 HTML 页。Adobe 建议使用 ExternalInterface 实现 JavaScript 与 ActionScript 之间的所有通信。
在 Flash Player 中,可以使用 HTML 页中的 JavaScript 来调用 ActionScript 函数。ActionScript 函数可以返回一个值,JavaScript 会立即接收它作为该调用的返回值。
总结:
1,JavaScript要调用flex中的ActionScript,需要flex中实现注册好被JavaScript调用的ActionScript函数,例如:
2,js调用flex的方式:
3,flex中调用javascript函数的方式:
//mxml应用程序上输入框内容改变事件处理函数
实例:
flex程序:
html页面:
注:原创作品,分享以供交流学习,转载请注明出处。
JavaScript和flex互通全是通过ExternalInterface 这个接口。
ExternalInterface 类是外部 API,这是一个在 ActionScript 和 Flash Player 容器之间实现直接通信的应用程序编程接口,例如,包含 JavaScript 的 HTML 页。Adobe 建议使用 ExternalInterface 实现 JavaScript 与 ActionScript 之间的所有通信。
在 Flash Player 中,可以使用 HTML 页中的 JavaScript 来调用 ActionScript 函数。ActionScript 函数可以返回一个值,JavaScript 会立即接收它作为该调用的返回值。
总结:
1,JavaScript要调用flex中的ActionScript,需要flex中实现注册好被JavaScript调用的ActionScript函数,例如:
//第一步:在mxml应用程序启动后执行:把js可以调用的ActionScript 函数注册 public function initApp():void { //把flexHelloWorld 函数注册成名为flexHelloWorld,可以供js调用 ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld); }
2,js调用flex的方式:
function callFlexFunction() { document.getElementById("supanccy").flexHelloWorld("Hello", "world"); }
3,flex中调用javascript函数的方式:
//mxml应用程序上输入框内容改变事件处理函数
protected function userName_changeHandler(event:TextOperationEvent):void { //在flex中调用页面中JavaScript的函数 var s:String = ExternalInterface.call("helloJs", "chenchaoyang"); }
实例:
flex程序:
<?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" minWidth="955" minHeight="600" creationComplete="facade.startup(this)" initialize="initApp()" > <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ import spark.events.TextOperationEvent; import mx.controls.Alert; import supan.MyFacde; private var facade:MyFacde = MyFacde.getInstance(); //第一步:在mxml应用程序启动后执行:把js可以调用的ActionScript 函数注册 public function initApp():void { //把flexHelloWorld ActionScript函数注册成名为flexHelloWorld,可以供js调用 ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld); } //供js调用的ActionScript函数,这里的param1,param2是从js传递回来的参数 public function flexHelloWorld(param1:String, param2:String):void { Alert.show("param1: " + param1 + "; param2:" + param2); } //mxml应用程序上输入框内容改变事件处理函数 protected function userName_changeHandler(event:TextOperationEvent):void { //在flex中调用页面中JavaScript的函数 var s:String = ExternalInterface.call("helloJs", "chenchaoyang"); } ]]> </fx:Script> <s:TextInput id="userName" change="userName_changeHandler(event)" x="215" y="173"/> </s:Application>
html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; overflow:auto; text-align:center; background-color: #ffffff; } #flashContent { display:none; } </style> <link rel="stylesheet" type="text/css" href="history/history.css" /> <script type="text/javascript" src="history/history.js"></script> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" > function callFlexFunction() { var x = document.getElementById("supanccy").flexHelloWorld("Hello", "world"); } function javascriptFunction(msg) { alert("this information come from html's javascript function:" + msg); } </script> <script type="text/javascript"> <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> var swfVersionStr = "10.0.0"; <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --> var xiSwfUrlStr = "playerProductInstall.swf"; var flashvars = {}; var params = {}; params.quality = "high"; params.bgcolor = "#ffffff"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "supanccy"; attributes.name = "supanccy"; attributes.align = "middle"; swfobject.embedSWF( "supanccy.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. --> swfobject.createCSS("#flashContent", "display:block;text-align:left;"); </script> </head> <body onload="callFlexFunction();"> <div id="flashContent"> <p> To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed. </p> <script type="text/javascript"> var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); </script> </div> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="supanccy"> <param name="movie" value="supanccy.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="supanccy.swf" width="100%" height="100%"> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p> Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed. </p> <!--<![endif]--> <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> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </noscript> </body> </html>