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




 

posted @ 2013-08-06 19:30  pangbangb  阅读(445)  评论(0编辑  收藏  举报