Flex组件IFrame中嵌入HTML页面的方法

最新推荐文章于 2017-07-24 14:52:41 发布

wujackleo

最新推荐文章于 2017-07-24 14:52:41 发布

阅读量3.5k

点赞数

文章标签： iframe flex html function 框架 import

本文介绍如何在Flex应用中嵌入HTML页面并实现参数传递。通过创建自定义IFrame组件，利用ExternalInterface进行Flex与HTML间的交互。文章详细展示了从组件搭建到页面集成的具体步骤。

摘要由CSDN通过智能技术生成

Flex组件IFrame中嵌入HTML页面的方法

2008年05月08日星期四 13:12

功能描述：在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">


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>