JavaScript、Flex、Air之间的相互通信的研究

文章转自:http://blog.csdn.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 plain copy print ?
 
  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
  3.      layout="absolute" creationComplete="init()" fontSize="13">     
  4.     <mx:Script>     
  5.         <!--[CDATA[  
  6.          import flash.net.navigateToURL;     
  7.             import mx.controls.Alert;     
  8.             import flash.external.ExternalInterface;     
  9.             private function init():void  
  10.             {     
  11.              //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
  12.                 this.html.domWindow.jsCallAir = jsCallAir;      
  13.             }     
  14.             private function jsCallAir(str:String):void  
  15.             {     
  16.                 airtext.text=str;   
  17.                 airCallJs();    
  18.             }     
  19.               
  20.             private function airCallJs():void  
  21.             {     
  22.              //调用js中airCallJs方法   
  23.                 //this.html.htmlLoader.window.airCallJs(airtext.text);  
  24.                 openWindowInAir();  
  25.             }  
  26.               
  27.             private function openWindowInAir():void  
  28.             {  
  29.              var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
  30.              navigateToURL(urlRequest);    
  31.             }  
  32.               
  33.         ]]-->     
  34.     </mx:Script>     
  35.              
  36.     <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
  37.     </mx:TextInput>     
  38.     <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
  39.     </mx:HTML>     
  40.     <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
  41.       
  42. </mx:WindowedApplication>   

 

 

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

    

[javascript]  view plain copy print ?
 
  1. <html lang="en">  
  2. <head>  
  3. //...此处省略了一些代码  
  4. <mce:script language="JavaScript" type="text/javascript"><!--  
  5. //...此处省略了一些代码  
  6. function airCallJs(value)  
  7. {  
  8.     alert("air call js ="+value);  
  9. }  
  10.   
  11. function onJsCallAir()  
  12. {  
  13.     openWind();  
  14.     try{     
  15.        var str=document.getElementById("text").value;        
  16.        //function jsCallAir will be called in the air   
  17.        jsCallAir(str);      
  18.     }catch(e){     
  19.         alert("call funtion jsCallAir error:"+e.description);     
  20.     }     
  21. }  
  22.   
  23. function jsCallApp()  
  24. {  
  25.     var flashApp =window.document.getElementById("AppTest");  
  26.     if(flashApp)  
  27.     {  
  28.         try  
  29.         {  
  30.             flashApp.jsCallApp(text.value);  
  31.         }  
  32.         catch(err)  
  33.         {  
  34.             alert("call funtion jsCallApp error:"+err.description);  
  35.         }  
  36.     }  
  37. }  
  38.   
  39. function appCallJs(value)  
  40. {  
  41.     onJsCallAir();  
  42.     alert("app call js ="+value);  
  43. }  
  44.   
  45. function openWind()  
  46. {  
  47.     window.open("http://www.google.com");  
  48. }  
  49. // --></mce:script>  
  50. </head>  
  51.   
  52. <body scroll="no" >  
  53. <table>  
  54.     <input type="text" id="text"  value="It's a javascript text!"/>   
  55.     <input type="button" value="jsCallApp" onclick="jsCallApp()"/>   
  56.     <input type="button" value="jsCallAir" onclick="onJsCallAir()"/>      
  57. </table>  
  58. //...此处省略了一些代码  
  59. </body>  
  60. </html>  

 

 

4.AirWeb工程中的代码:

   

[java]  view plain copy print ?
 
  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
  3.      layout="absolute" creationComplete="init()" fontSize="13">     
  4.     <mx:Script>     
  5.         <!--[CDATA[  
  6.             import flash.net.navigateToURL;     
  7.             import mx.controls.Alert;     
  8.             import flash.external.ExternalInterface;     
  9.             private function init():void  
  10.             {     
  11.                 //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
  12.                 this.html.domWindow.jsCallAir = jsCallAir;       
  13.             }     
  14.             private function jsCallAir(str:String):void  
  15.             {     
  16.                 airtext.text=str;   
  17.                 airCallJs();    
  18.             }     
  19.               
  20.             private function airCallJs():void  
  21.             {     
  22.                 //调用js中airCallJs方法   
  23.                 //this.html.htmlLoader.window.airCallJs(airtext.text);  
  24.                 openWindowInAir();  
  25.             }  
  26.               
  27.             private function openWindowInAir():void  
  28.             {  
  29.                 var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
  30.                 navigateToURL(urlRequest);    
  31.             }  
  32.               
  33.         ]]-->     
  34.     </mx:Script>     
  35.              
  36.     <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
  37.     </mx:TextInput>     
  38.     <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
  39.     </mx:HTML>     
  40.     <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
  41. </mx:WindowedApplication>   

 

 

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

你可能感兴趣的:(JavaScript)