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

2023-05-25,,

在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窗口遮挡,后面会讲到这个问题。

[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。