IFRAME-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_20805/article/details/82029756

本文介绍了一个使用Flex与IFrame集成的应用示例，通过该示例可以了解如何利用Flex构建包含动态加载内容的界面。示例中包括了树形菜单导航与相应内容区域的动态加载实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[url]http://www.deitte.com/IFrameDemo3/IFrameDemo.html[/url]


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="iFrame.visible=true" viewSourceURL="srcview/index.html"> 

    <mx:HBox width="100%" height="100%">

        <mx:Panel title="Tree" width="200" height="100%" roundedBottomCorners="true">
             <mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"
                     labelField="@label" showRoot="false"
                     change="iFrame.source = (Tree(event.target).selectedItem.attribute('path').toString());"  />
        </mx:Panel>

        <mx:Panel width="100%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
            <IFrame id="iFrame" source="http://www.adobe.com/devnet/flex/" width="100%" height="100%"  />
            <mx:ControlBar>
                <mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true" click="iFrame.visible=cbVisible.selected"/>
            </mx:ControlBar>
        </mx:Panel>

    </mx:HBox>

    <mx:XMLList id="treeData">
        <node label="Flex Resources">
            <node label="Flex Developer Center" path="http://www.adobe.com/devnet/flex/" />
            <node label="Flex Team Blog" path="http://weblogs.macromedia.com/flexteam/" />
            <node label="Flex Blogs on MXNA" path="http://weblogs.macromedia.com/mxna/FeedList.cfm#Flex" />
            <!-- these sites pop themselves out of a frame:
            <node label="flex.org" path="http://www.flex.org" />
            <node label="Adobe Labs" path="http://labs.adobe.com/wiki/index.php/Main_Page" />
            -->
        </node>
        <node label="Search">
            <node label="Google" path="http://www.google.com" />
            <node label="Yahoo" path="http://www.yahoo.com" />
        </node>
    </mx:XMLList>

</mx:Application>


<?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>

<!-- saved from url=(0014)about:internet --> 

<!--
Most of this file is HTML/JavaScript that was generated by Flex Builder.  The pieces added:

1. wmode set to opaque
2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods
3. the 'myFrame' div

I also commented out the history feature, but I think it could be integrated into this page.

8/20/06 Brian Deitte
-->			

<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 language="JavaScript" type="text/javascript"> 

// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;

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>";
}

</script> 


</head> 

<body scroll="no"> 
<!-- <script language="JavaScript" type="text/javascript" src="history.js"></script> --> 
<script language="JavaScript" type="text/javascript"> 

<!--

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
	// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
	// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;
	AC_FL_RunContent(
		"src", "playerProductInstall",
		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "100%",
		"height", "100%",
		"align", "middle",
		"id", "IFrameDemo",
		"quality", "high",
		"bgcolor", "#869ca7",
		"name", "IFrameDemo",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);

} else if (hasRequestedVersion) {
	// if we've detected an acceptable version
	// embed the Flash Content SWF when all tests are passed
	AC_FL_RunContent(
			"src", "IFrameDemo",
			"width", "100%",
			"height", "100%",
			"align", "middle",
			"id", "IFrameDemo",
			"quality", "high",
			"bgcolor", "#869ca7",
			"name", "IFrameDemo",
//			"flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '',
			"allowScriptAccess","sameDomain",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer",
			"wmode", "opaque"			
	);
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'This content requires the Adobe Flash Player. '
   	+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script> 

<noscript> 
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="IFrameDemo" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="IFrameDemo.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="IFrameDemo.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="IFrameDemo" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
				wmode="opaque"
			</embed>
	</object>
</noscript> 

<!--
<iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="22" height="0"></iframe>
--> 
<div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div> 

</body> 

</html>