[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在flex的web应用中，我们往往必须有嵌入html的需求，这时候你会发现IFrame很有用！

flex而且可以和html中的JavaScript进行交互，flex可以通过iframe调用到html中的JavaScript方法以及获取调用后的返回值。

flex iframe下载地址：https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip

bin有需要用到的flex库 swc

flex代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://code.google.com/p/flex-iframe/"> <fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function onCallJS(event:MouseEvent):void
{
// 调用当前iframe嵌入页面中的onCallJS 的JS方法
iframeLocal.callIFrameFunction("flexCall");
} protected function onSendParamToHtml(event:MouseEvent):void
{
// 调用当前iframe嵌入页面中的flexSendParam 的JS方法，并传入一个参数
iframeLocal.callIFrameFunction("flexSendParam",["来自于flex的一个参数"]);
} protected function onSendParamToHtml2(event:MouseEvent):void
{
// 调用当前iframe嵌入页面中的flexSendParam2 的JS方法，并传入2个参数。
//flexSendParam2方法会返回一个字符串，最后一个回调就是输出值的函数
iframeLocal.callIFrameFunction("flexSendParam2",["Frost.Yen","来自于四川"],callback); function callback(data:*):void
{
Alert.show(data);
}
}
]]>
</fx:Script> <fx:Declarations>

</fx:Declarations>
<s:VGroup width="100%" height="100%" >
<s:Panel width="100%" height="100%" title="使用iframe本地页面。。。。">
<s:VGroup width="100%" height="100%" >
<s:HGroup>
<s:Button label="Flex call js" click="onCallJS(event)"/>
<s:Button label="Flex send one param to js" click="onSendParamToHtml(event)"/>
<s:Button label="Flex send mult param to js" click="onSendParamToHtml2(event)"/>
</s:HGroup>
<ns:IFrame id="iframeLocal" width="100%" height="100%" source="local.html" />
</s:VGroup>
</s:Panel>
<s:Panel width="100%" height="100%" title="使用远程页面。。。。">
<ns:IFrame id="iframeContainer" width="100%" height="100%" source="http://www.cnblogs.com/frost-yen" overlayDetection="true">
</ns:IFrame>
</s:Panel>
</s:VGroup>
</s:Application>

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>iframe local.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
// 无参数
function flexCall() {
alert("flex call js ....");
}
// 1个参数
function flexSendParam(message) {
alert(message);
}
// 多个参数并返回值
function flexSendParam2(name,message) {
alert(name+message);
return "来自于js的消息："+name+" "+message;
}
</script>
</head>
<body>
flexIframe example html page!
<input type="button" value="say" onclick="flexCall()"/>
</body>
</html>

需要注意的是：flex项目工程需要发布到http的应用服务器（如tomcat、Apache、iis）这些服务器中，用http请求方式才能调用到页面内容和JavaScript方法。如果不发布到应用服务器中，那样只能在iframe中嵌套远程的http请求的页面，本地静态页面是无法显示的，顾名思义就是用flex调试是不行的，而且会有意想不到的bug产生。

测试以上代码会发现

Alert.show(data); Alert弹出窗口会被iframe窗口遮挡，后面会讲到这个问题。