[转载]JavaScript、Flex、Air之间的互相通信的研究

[转载]JavaScript、Flex、Air之间的相互通信的研究

文章转自：http://blog.****.net/txiejun/article/details/5675191

在Air中嵌入的HTML控件中打开一个新的浏览器窗口是不行的，而通过Air本身的navigateToURL可以做到这点；为了能够实现在Air的HTML控件中打开一个新的浏览器窗口，我考虑到了使用JavaScript来作为中间媒介；通过HTML中的对象访问JavaScript函数，然后JavaScript函数在访问Air中的函数来调用Air的navigateToURL方法实现以上目的；可能这种方式不是最优解决方案，不过通过这几天的研究倒是把JavaScript、Flex、Air之间的相互通信有了更深入的了解；为了不浪费，所以写下来供以后参考，好了，开始吧；

1.首先需要建立两个工程，一个名叫AppTest的Flex工程，另一个叫做AirWeb的Air工程；为了减少拷贝文件的操作，可以把AppTest工程的output路基设置到Air的bin-debug路径下（比如我目前的AppTest工程发布路径为:D:/workspace/AirWeb/bin-debug/AppTest.html），这样在启动Air的时候，就很方便的调用AppTest中生存的资源了；

2.AppTest 工程的内容如下：

[java] view plaincopyprint?
 
<?xml version="1.0" encoding="utf-8"?>     
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
     layout="absolute" creationComplete="init()" fontSize="13">     
    <mx:Script>     
        <!--[CDATA[  
         import flash.net.navigateToURL;     
            import mx.controls.Alert;     
            import flash.external.ExternalInterface;     
            private function init():void  
            {     
             //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
                this.html.domWindow.jsCallAir = jsCallAir;      
            }     
            private function jsCallAir(str:String):void  
            {     
                airtext.text=str;   
                airCallJs();    
            }     
              
            private function airCallJs():void  
            {     
             //调用js中airCallJs方法   
                //this.html.htmlLoader.window.airCallJs(airtext.text);  
                openWindowInAir();  
            }  
              
            private function openWindowInAir():void  
            {  
             var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
             navigateToURL(urlRequest);    
            }  
              
        ]]-->     
    </mx:Script>     
             
    <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
    </mx:TextInput>     
    <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
    </mx:HTML>     
    <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
      
</mx:WindowedApplication>   

3.AppTest.html 页面中的重要内容：

[javascript] view plaincopyprint?
 
<html lang="en">  
<head>  
//...此处省略了一些代码  
<mce:script language="JavaScript" type="text/javascript"><!--  
//...此处省略了一些代码  
function airCallJs(value)  
{  
    alert("air call js ="+value);  
}  
  
function onJsCallAir()  
{  
    openWind();  
    try{     
       var str=document.getElementById("text").value;        
       //function jsCallAir will be called in the air   
       jsCallAir(str);      
    }catch(e){     
        alert("call funtion jsCallAir error:"+e.description);     
    }     
}  
  
function jsCallApp()  
{  
    var flashApp =window.document.getElementById("AppTest");  
    if(flashApp)  
    {  
        try  
        {  
            flashApp.jsCallApp(text.value);  
        }  
        catch(err)  
        {  
            alert("call funtion jsCallApp error:"+err.description);  
        }  
    }  
}  
  
function appCallJs(value)  
{  
    onJsCallAir();  
    alert("app call js ="+value);  
}  
  
function openWind()  
{  
    window.open("http://www.google.com");  
}  
// --></mce:script>  
</head>  
  
<body scroll="no" >  
<table>  
    <input type="text" id="text"  value="It's a javascript text!"/>   
    <input type="button" value="jsCallApp" onclick="jsCallApp()"/>   
    <input type="button" value="jsCallAir" onclick="onJsCallAir()"/>      
</table>  
//...此处省略了一些代码  
</body>  
</html>  

4.AirWeb工程中的代码：

[java] view plaincopyprint?
 
<?xml version="1.0" encoding="utf-8"?>     
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
     layout="absolute" creationComplete="init()" fontSize="13">     
    <mx:Script>     
        <!--[CDATA[  
            import flash.net.navigateToURL;     
            import mx.controls.Alert;     
            import flash.external.ExternalInterface;     
            private function init():void  
            {     
                //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
                this.html.domWindow.jsCallAir = jsCallAir;       
            }     
            private function jsCallAir(str:String):void  
            {     
                airtext.text=str;   
                airCallJs();    
            }     
              
            private function airCallJs():void  
            {     
                //调用js中airCallJs方法   
                //this.html.htmlLoader.window.airCallJs(airtext.text);  
                openWindowInAir();  
            }  
              
            private function openWindowInAir():void  
            {  
                var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
                navigateToURL(urlRequest);    
            }  
              
        ]]-->     
    </mx:Script>     
             
    <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
    </mx:TextInput>     
    <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
    </mx:HTML>     
    <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
</mx:WindowedApplication>   

以上的代码分别实现了JavaScript于air的互相通信和JavaScript和flex app的互相通信，因此要实现，air和flex app的通信也就很简单了，借助JavaScript作为中间介质，也就实现了air和flex app的互相通信；

[转载]JavaScript、Flex、Air之间的互相通信的研究

相关推荐