[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
Posted 浮生若夢♬為歡幾何
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[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窗口遮挡，后面会讲到这个问题。
以上是关于[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法的主要内容，如果未能解决你的问题，请参考以下文章