在flex的web應用中，我們往往必須有嵌入html的需求，這時候你會發現IFrame很有用！
flex而且可以和html中的JavaScript進行交互，flex可以通過iframe調用到html中的JavaScript方法以及獲取調用后的返回值。
flex iframe下載地址：https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip
bin有需要用到的flex庫 swc
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" xmlns:ns="http://code.google.com/p/flex-iframe/"> <fx:Script> <![CDATA[ import mx.controls.Alert; protected function onCallJS(event:MouseEvent):void { // 調用當前iframe嵌入頁面中的onCallJS 的JS方法 iframeLocal.callIFrameFunction("flexCall"); } protected function onSendParamToHtml(event:MouseEvent):void { // 調用當前iframe嵌入頁面中的flexSendParam 的JS方法，並傳入一個參數 iframeLocal.callIFrameFunction("flexSendParam",["來自於flex的一個參數"]); } protected function onSendParamToHtml2(event:MouseEvent):void { // 調用當前iframe嵌入頁面中的flexSendParam2 的JS方法，並傳入2個參數。 //flexSendParam2方法會返回一個字符串，最后一個回調就是輸出值的函數 iframeLocal.callIFrameFunction("flexSendParam2",["Frost.Yen","來自於四川"],callback); function callback(data:*):void { Alert.show(data); } } ]]> </fx:Script> <fx:Declarations> <!-- 將非可視元素（例如服務、值對象）放在此處 --> </fx:Declarations> <s:VGroup width="100%" height="100%" > <s:Panel width="100%" height="100%" title="使用iframe本地頁面。。。。"> <s:VGroup width="100%" height="100%" > <s:HGroup> <s:Button label="Flex call js" click="onCallJS(event)"/> <s:Button label="Flex send one param to js" click="onSendParamToHtml(event)"/> <s:Button label="Flex send mult param to js" click="onSendParamToHtml2(event)"/> </s:HGroup> <ns:IFrame id="iframeLocal" width="100%" height="100%" source="local.html" /> </s:VGroup> </s:Panel> <s:Panel width="100%" height="100%" title="使用遠程頁面。。。。"> <ns:IFrame id="iframeContainer" width="100%" height="100%" source="http://www.cnblogs.com/frost-yen" overlayDetection="true"> </ns:IFrame> </s:Panel> </s:VGroup> </s:Application>
html代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <title>iframe local.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> // 無參數 function flexCall() { alert("flex call js ...."); } // 1個參數 function flexSendParam(message) { alert(message); } // 多個參數 並返回值 function flexSendParam2(name,message) { alert(name+message); return "來自於js的消息："+name+" "+message; } </script> </head> <body> flexIframe example html page! <input type="button" value="say" onclick="flexCall()"/> </body> </html>
需要注意的是：flex項目工程需要發布到http的應用服務器（如tomcat、Apache、iis）這些服務器中，用http請求方式才能調用到頁面內容和JavaScript方法。如果不發布到應用服務器中，那樣只能在iframe中嵌套遠程的http請求的頁面，本地靜態頁面是無法顯示的，顧名思義就是用flex調試是不行的，而且會有意想不到的bug產生。
測試以上代碼會發現
Alert.show(data);
Alert彈出窗口會被iframe窗口遮擋，后面會講到這個問題。