flex 之JavaScript 和ActionScript互通

Supanccy2013

浏览: 224966 次
性别:
来自: 深圳

最近访客更多访客>>

loginboot

sp42

dyfxfxw520

weitd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex

actionscript javascript

注：原创作品，分享以供交流学习，转载请注明出处。

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>

分享到：

flex之下拉框值更改事件调用JavaScript函数 | flex 之折线图2

2014-05-09 23:22
浏览 1450
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论