功能描述:在Flex中嵌套框架,并且进行数值传递
1、编辑Flex框架组件iFrame.mxml
<?xml version="1.0" encoding="utf-8"?>
<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"
"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"
参考: