在Flex （Flash）中嵌入HTML 程式碼或頁面—Flex IFrame

hoojo發表於2013-08-15
FlexHTML

在flex元件中嵌入html程式碼，可以利用flex iframe。這個在很多時候會用到的，有時候flex必須得這樣做，如果你不這樣做還真不行……

flex而且可以和html進行JavaScript互動操作，flex呼叫到html中的JavaScript方法以及獲取呼叫後的返回值。

 

1、flex iframe下載地址：https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip

下載完成後目錄如下

image 

asdoc就是文件doc了

bin有需要用到的flex庫 swc

examples就是示例

sources原始碼

 

歡迎關注我的部落格：http://hoojo.cnblogs.com

http://blog.csdn.net/IBM_hoojo

 

2、將bin目錄中的swc引入到你的flex工程中，並加入程式碼片段如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
                horizontalAlign="center" verticalAlign="middle" xmlns:s="library://ns.adobe.com/flex/spark">
    
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            protected function sayHelloHandler(event:MouseEvent):void {
                // 呼叫當前iframe嵌入頁面中的sayHello 的JavaScript方法
                iFrameBySource.callIFrameFunction("sayHello");
            }
            
            protected function sayHandler(event:MouseEvent):void {
                // 呼叫當前iframe嵌入頁面中的say的JavaScript方法，並傳入一個引數
                iFrameBySource.callIFrameFunction("say", ["hello world!"]);
            }
            protected function sayHiHandler(event:MouseEvent):void {
                // 呼叫當前iframe嵌入頁面中的sayHi的JavaScript方法，並傳入2個引數。sayHi方法會返回一個字串，最後一個回撥就是輸出值的函式
                iFrameBySource.callIFrameFunction("sayHi", ["hello world", "李四"], function (data:*): void {
                    Alert.show(data);
                });
            }
        ]]>
    </mx:Script>
    
    <!-- HTML content stored in a String -->
    <mx:String id="iFrameHTMLContent">
        <![CDATA[
        <html>
            <head>
                <title>About</title>
            </head>
            <body>
                <div>About</div>
                <p>Simple HTML Test application. This test app loads a page of html locally.</p>
                <div>Credits</div>
                <p> </p>
                <p>IFrame.as is based on the work of</p>
                <ul>
                <li><a href="http://coenraets.org/" target="_top">Christophe Coenraets</a></li>
                <li><a href="http://www.deitte.com/" target="_top">Brian Deitte</a></li>
                </ul>
            </body>
        </html>
        ]]>
    </mx:String>
    
    <mx:Panel width="80%" height="80%" title="使用source本地遠端頁面">
        <flexiframe:IFrame id="iFrameBySource" width="100%" height="100%" source="frame.html"/>
        <s:Button label="sayHello" click="sayHelloHandler(event)"/>
        <s:Button label="say-param" click="sayHandler(event)"/>
        <s:Button label="sayHi" click="sayHiHandler(event)"/>
    </mx:Panel>
    
    <mx:Panel width="80%" height="80%" title="使用source載入遠端頁面">
        <flexiframe:IFrame id="iFrameByRemoteSource" width="100%" height="100%" source="http://www.baidu.com" visible="true"
                           overlayDetection="true" />
    </mx:Panel>
    
    <mx:Panel width="80%" height="80%" title="使用content屬性 載入本地html文字內容">
        <flexiframe:IFrame id="iFrameByContent" width="100%" height="100%" content="{iFrameHTMLContent}"/>
    </mx:Panel>
    
</mx:Application>

 

frame.html 頁面內容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>frame.html</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript">
        // 無引數
        function sayHello() {
            alert("hello......");
        }
    
        // 1個引數
        function say(message) {
            alert("your say: " + message);
        }
    
        // 多個引數 並返回值
        function sayHi(message, name) {
            alert("your say: " + message + ", name: " + name);
            return "your say: " + message + ", name: " + name;
        }
    </script>    
 
  </head>
  
  <body>
    flex frame example html page!
    <input type="button" value="say" onclick="sayHello()"/>
  </body>
</html>

要注意的是：你的flex專案工程需要發表到http的應用伺服器（如tomcat、jboss、iis）這些伺服器中，用http請求方式才能呼叫到頁面內容和JavaScript方法。如果不釋出到應用伺服器中，那樣只能在iframe中巢狀遠端的http請求的頁面，本地靜態頁面是無法顯示的。

相關文章