隨筆-57  評論-117  文章-1  trackbacks-0

          在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請求的頁面,本地靜態頁面是無法顯示的。



          作者:hoojo
          出處:
          blog:http://blog.csdn.net/IBM_hoojo
                   http://hoojo.cnblogs.com
          本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。


          版權所有,轉載請注明出處 本文出自:
          分享道版權所有,歡迎轉載,轉載請注明出處,謝謝
          posted on 2013-08-15 15:58 hoojo 閱讀(5861) 評論(2)  編輯  收藏 所屬分類: Flex/ActionScriptFrameWork IntegrationHTML/CSSJavaEEJavaScript

          評論:
          # re: 在Flex (Flash)中嵌入HTML 代碼或頁面&mdash;Flex IFrame 2013-08-18 12:45 | tb
          可以好好研究一下的  回復  更多評論
            
          # re: 在Flex (Flash)中嵌入HTML 代碼或頁面&mdash;Flex IFrame 2013-09-12 08:57 | 小村
          <flexiframe:IFrame id="iFrameByRemoteSource" width="100%" height="100%" source="http://www.baidu.com" visible="true"
          overlayDetection="true" />

          -------------------------
          怎樣獲取這里面的html代碼(遠程的)  回復  更多評論
            
          主站蜘蛛池模板: 绵阳市| 金阳县| 灌阳县| 田东县| 赣州市| 新竹市| 龙游县| 竹北市| 宝丰县| 镇远县| 沙雅县| 吴川市| 米脂县| 牟定县| 河曲县| 宣恩县| 定安县| 简阳市| 汝阳县| 巢湖市| 固镇县| 巨鹿县| 通州区| 金沙县| 仁化县| 九江市| 新竹县| 南平市| 磐石市| 林周县| 宁安市| 贞丰县| 台北市| 慈溪市| 桃江县| 商丘市| 石景山区| 临清市| 永登县| 汽车| 浮山县|