首頁 > 開發者 > JavaScript

Flex與JavaScript互動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

早就再留意Flex與Js的互動方式了，網上看了就三兩句代碼就解決了，從前對此比較不屑，自認為什麼時 候想用了花個5分鐘看看就搞定了。

今天終於靜下來自己測試和整理了下，才發現其實要調試成功並沒那麼簡單，這幾行代碼折騰了我大半天 真是的。

下面我把我的測試代碼和心得和大家分享下：

Js2Flex.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">  
  3.      <mx:Script>  
  4.         <!--[CDATA[  
  5.             import mx.controls.Alert;     
  6.             
  7.             public function flexHelloWorld(param1:String, param2:String):String {     
  8.                   Alert.show("param1: " + param1 + "; param2:" + param2);     
  9.                return "Hello " + param1 + param2;     
  10.             }     
  11.                  
  12.             public function initApp():void {     
  13.                 ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld);     
  14.             }     
  15.                  
  16.             public function jspHello():void {     
  17.                var s:String = ExternalInterface.call("hello", "Flex");     
  18.                 Alert.show(s);     
  19.            }       
  20.         ]]-->  
  21.      </mx:Script>  
  22.     <mx:Button x="52" y="58" label="call javascript" click="jspHello()"/>   
  23. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; public function flexHelloWorld(param1:String, param2:String):String { Alert.show("param1: " + param1 + "; param2:" + param2); return "Hello " + param1 + param2; } public function initApp():void { ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld); } public function jspHello():void { var s:String = ExternalInterface.call("hello", "Flex"); Alert.show(s); } ]]--> </mx:Script> <mx:Button x="52" y="58" label="call javascript" click="jspHello()"/> </mx:Application>  

testSwf.html

view plaincopy to clipboardprint?
  1. <html>  
  2. <head>  
  3. <mce:script type="text/javascript" src="swfobject.js" mce_src="swfobject.js"></mce:script>  
  4. </head>  
  5. <body>  
  6. <div id="flashcontent">  
  7. This text is replaced by the Flash movie.  
  8. </div>  
  9. <br>  
  10. <input type=button value="Call Flex" onclick="callflex()"/>  
  11. <mce:script language="javascript"><!--  
  12. var so = new SWFObject("Js2Flex.swf", "flexObject", "640", "300", "7", "#336699");  
  13.   so.write("flashcontent");  
  14. function hello(param) {      
  15.      return "jsp Hello:" + param;     
  16.     }     
  17.      
  18. function callFlexFunction() {    
  19.      var fl = document.getElementById("flexObject");  
  20.     var x= fl.flexHelloWorld("Hello", "world");      
  21.    }    
  22. function callflex()  
  23. {  
  24. callFlexFunction();  
  25. }  
  26. // --></mce:script>  
  27. </body>  
  28. </html>   

<html> <head> <mce:script type="text/javascript" src="swfobject.js" mce_src="swfobject.js"></mce:script> </head> <body> <div id="flashcontent"> This text is replaced by the Flash movie. </div> <br> <input type=button value="Call Flex" onclick="callflex()"/> <mce:script language="javascript"><!-- var so = new SWFObject("Js2Flex.swf", "flexObject", "640", "300", "7", "#336699"); so.write("flashcontent"); function hello(param) { return "jsp Hello:" + param; } function callFlexFunction() { var fl = document.getElementById("flexObject"); var x= fl.flexHelloWorld("Hello", "world"); } function callflex() { callFlexFunction(); } // --></mce:script> </body> </html>  

其實互動主要是通過 Flex內建介面ExternalInterface的addCallback和call方法來實現的，一個是命名方法代理，一個是條用Js方法。然後通 過swfobject.js內建的方法嵌入swf實現Flex和JavaScript的無縫互動

注意：一定要到網上下載swfobject.js，然後再<head>內匯入，然後用new SWFObject()嵌入swf，用<html>的<object><embed>嵌入的swf無法傳遞參數，這 個就是為什麼我弄了大半天沒調試成功的原因，這個原因還沒弄明白，不過swf還是盡量用js來嵌入，這樣更符合html標準。

還有就是如果把產生的swf更換目錄 然後本地調試會有安全沙箱問題，所以最好在伺服器上調試。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More