ivaneeo's blog

自由的力量,自由的生活。

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  669 Posts :: 0 Stories :: 64 Comments :: 0 Trackbacks
功能描述:在Flex中嵌套框架,并且进行数值传递
1、编辑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>
2、放置到要使用框架的Flex中index.mxml,并写入引用哪个frame.html
<ui:IFrame id="iFrame" source="frame.html" visible="true" width="100%" height="300"/>
3、在引用框架的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>
4、在Flex页面index.mxml输入的函数值,调用index.html中的'getEditorText'函数,并且写入到text1.text中
     text1.text=ExternalInterface.call('getEditorText',param1,param2,param3,...)
     getEditorText:函数名称
     param:参数值
5、在生成页中取得框架中的函数
     框架内的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"
参考:

具体的一个例子——使用IFrame这个框架的一个页面的代码如下:

<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>


<script>
<!--
function moveIFrame(x,y,w,h) {
// alert("move to " + x + "," + y + ", " + w + "/" + h);
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
   frameRef.style.top=y;
    frameRef.width=w;
    frameRef.height=h;
}

function hideIFrame(){
// alert("hide");
    document.getElementById("myFrame").style.visibility="hidden";
}

function showIFrame(){
// alert("show");
    document.getElementById("myFrame").style.visibility="visible";
}

function navigateTo(url) {
// alert("nav to " + url);
// alert("from " + document.getElementById("myFrame").location);
document.getElementById("myFrame").src = url;
}

-->
</script>


<script language="VBScript">
<!--

// Catch FS Commands in IE, and pass them to the corresponding JavaScript function.
Sub flexapp_FSCommand(ByVal command, ByVal str)
    call flexapp_DoFSCommand(command, str)
end sub

// -->
</script>
</head>
<body style="margin:0px">

<object onMouseDown="document.body.focus();"
   classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
  

codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14

,0'
   width='100%' height='100%'
   id='flexapp' name='flexapp'>
   <param name='flashvars' value=''>
   <param name='src' value='EXPIframe.swf'>
   <param name="wmode" value="opaque">
   <embed pluginspage='http://www.macromedia.com/go/getflashplayer' width='100%'

height='100%'
       flashvars=''
       src='EXPIframe.swf'
       name='flexapp'
       wmode="opaque"
       swLiveConnect="true"
   />
</object>

<iframe id="myFrame" name="myFrame"
    frameborder="0"
    style="position:absolute;background-

color:transparent;border:0px;visibility:hidden;"></iframe>

</body>
</html>

posted on 2012-03-08 22:48 ivaneeo 阅读(2536) 评论(1)  编辑  收藏 所属分类: flex-我酷所以我在

Feedback

# re: Flex组件IFrame中嵌入HTML页面的方法 2014-08-14 16:54 12
12123  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: