[zz]Flex組件IFrame中嵌入HTML頁面的方法

轉載自 shizuwu

最終編輯 shizuwu

功能描述：在Flex中嵌套框架，並且進行數值傳遞

１、編輯Flex框架組件iFrame.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    resize="callLater(moveIFrame)"
    move="callLater(moveIFrame)">
    <mx:Script>
    <![CDATA[
        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;
        private var __source: String;
        /**
         * Move iframe through ExternalInterface. The location is determined using localToGlobal()
         * on a Point in the Canvas.
         **/
        private function moveIFrame(): void
        {
            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);
            ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
        }
        /**
         * The source URL for the IFrame. When set, the URL is loaded through ExternalInterface.
         **/
        public function set source(source: String): void
        {
            if (source)
            {
                if (! ExternalInterface.available)
                {
                    throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
                }
                __source = source;
                ExternalInterface.call("loadIFrame", source);
                moveIFrame();
            }
        }
        public function get source(): String
        {
            return __source;
        }
        /**
         * Whether the IFrame is visible. 
         **/
        override public function set visible(visible: Boolean): void
        {
            super.visible=visible;
            if (visible)
            {
                ExternalInterface.call("showIFrame");
            }
            else 
            {
                ExternalInterface.call("hideIFrame");
            }
        }
    ]]>
    </mx:Script>
</mx:Canvas>

 

２、放置到要使用框架的Flex中index.mxml，並寫入引用哪個frame.html

<ui:IFrame id="iFrame" source="frame.html" visible="true" width="100%" height="300"/>

３、在引用框架的Flex生成頁index.html里加入：

     <1. wmode set to opaque

     在調用swf的後面加上"wmode","opaque"

     例如："pluginspage", "http://www.adobe.com/go/getflashplayer",

           "wmode","opaque"

     <2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods

     <script language="JavaScript" type="text/javascript">

<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 28;
// -----------------------------------------------------------------------------
// -->
function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
    frameRef.style.top=y;
    var iFrameRef=document.getElementById("myIFrame"); 
      iFrameRef.width=w;
      iFrameRef.height=h;
}
function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}
function loadIFrame(url){
      document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>";
}
//要調用的內容，加載前三個就可以了，後面這個函數是用來調用返回值
function getEditorText(){
      return document.getElementById("myIFrame").contentWindow.GetEditorText1();
}
</script>

 

     <3. the 'myFrame' div

         在</body>這前寫入：

         <div id="myFrame" style="position:absolute;background-color:transparent;border:0         px;visibility:hidden;"></div>

４、在Flex頁面index.mxml輸入的函數值,調用index.html中的'getEditorText'函數，並且寫入到text1.text中

     text1.text=ExternalInterface.call('getEditorText',param1,param2,param3,...)

     getEditorText:函數名稱

     param:參數值

５、在生成頁中取得框架中的函數

     框架內的frame.html，放置在head之間:

    function GetEditorText1(){

     return getHTML(params);

     index.html生成頁的調用，設置在head之間：

     function getEditorText(){

      return document.getElementById("myIFrame").contentWindow.GetEditorText1();

     }

 

後記：實際中在這裏只是調用一個層放在對應位置而已，當我們在Flex中做申縮動作時，層也要跟着改變，我是如此處理的：

     設置move或show事件，當move或show時則調用：iFrame.source = "frame.html"

參考：

http://www.cnflex.cn/html/mxml/20070321/95.html

http://www.cnblogs.com/dannyr/archive/2004/11/24/68026.aspx

http://renaun.com/flex2/posts/flexsearch/index.html（有源碼下載）