在Flex(Flash)中嵌入HTML代码或页面(Flex IFrame)

admin Flex

2023-12-07 0 298

在flex组件中嵌入html代码，可以利用flex iframe。这个在很多时候会用到的，有时候flex必须得这样做，如果你不这样做还真不行…… flex而且可以和html进行JavaScript交互操作，flex调用到html中的JavaScript方法以及获取调用后的返回值。 1、flex iframe下载地址：https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip 下载完成后目录如下 asdoc就是文档doc了 bin有需要用到的flex库 swc examples就是示例 sources源代码 2、将bin目录中的swc引入到你的flex工程中，并加入代码片段如下复制代码代码如下: <?xml version=\”1.0\” encoding=\”utf-8\”?> <mx:Application xmlns:mx=\”http://www.adobe.com/2006/mxml\” xmlns:flexiframe=\”http://code.google.com/p/flex-iframe/\” horizontalAlign=\”center\” verticalAlign=\”middle\” xmlns:s=\”library://ns.adobe.com/flex/spark\”> <mx:Script> <![CDATA[ import mx.controls.Alert; protected function sayHelloHandler(event:MouseEvent):void { // 调用当前iframe嵌入页面中的sayHello 的JavaScript方法 iFrameBySource.callIFrameFunction(\”sayHello\”); } protected function sayHandler(event:MouseEvent):void { // 调用当前iframe嵌入页面中的say的JavaScript方法，并传入一个参数 iFrameBySource.callIFrameFunction(\”say\”, [\”hello world!\”]); } protected function sayHiHandler(event:MouseEvent):void { // 调用当前iframe嵌入页面中的sayHi的JavaScript方法，并传入2个参数。sayHi方法会返回一个字符串，最后一个回调就是输出值的函数 iFrameBySource.callIFrameFunction(\”sayHi\”, [\”hello world\”, \”李四\”], function (data:*): void { Alert.show(data); }); } ]]> </mx:Script> <!– HTML content stored in a String –> <mx:String id=\”iFrameHTMLContent\”> <![CDATA[ <html> <head> <title>About</title> </head> <body> <div>About</div> <p>Simple HTML Test application. This test app loads a page of html locally.</p> <div>Credits</div> <p> </p> <p>IFrame.as is based on the work of</p> <ul> <li><a href=\”http://coenraets.org/\” target=\”_top\”>Christophe Coenraets</a></li> <li><a href=\”http://www.deitte.com/\” target=\”_top\”>Brian Deitte</a></li> </ul> </body> </html> ]]> </mx:String> <mx:Panel width=\”80%\” height=\”80%\” title=\”使用source本地远程页面\”> <flexiframe:IFrame id=\”iFrameBySource\” width=\”100%\” height=\”100%\” source=\”frame.html\”/> <s:Button label=\”sayHello\” click=\”sayHelloHandler(event)\”/> <s:Button label=\”say-param\” click=\”sayHandler(event)\”/> <s:Button label=\”sayHi\” click=\”sayHiHandler(event)\”/> </mx:Panel> <mx:Panel width=\”80%\” height=\”80%\” title=\”使用source加载远程页面\”> <flexiframe:IFrame id=\”iFrameByRemoteSource\” width=\”100%\” height=\”100%\” source=\”http://www.baidu.com\” visible=\”true\” overlayDetection=\”true\” /> </mx:Panel> <mx:Panel width=\”80%\” height=\”80%\” title=\”使用content属性加载本地html文本内容\”> <flexiframe:IFrame id=\”iFrameByContent\” width=\”100%\” height=\”100%\” content=\”{iFrameHTMLContent}\”/> </mx:Panel> </mx:Application> frame.html 页面内容复制代码代码如下: <!DOCTYPE HTML PUBLIC \”-//W3C//DTD HTML 4.01 Transitional//EN\”> <html> <head> <title>frame.html</title> <meta http-equiv=\”pragma\” content=\”no-cache\”> <meta http-equiv=\”cache-control\” content=\”no-cache\”> <meta http-equiv=\”expires\” content=\”0\”> <script type=\”text/javascript\”> // 无参数 function sayHello() { alert(\”hello……\”); } // 1个参数 function say(message) { alert(\”your say: \” + message); } // 多个参数并返回值 function sayHi(message, name) { alert(\”your say: \” + message + \”, name: \” + name); return \”your say: \” + message + \”, name: \” + name; } </script> </head> <body> flex frame example html page! <input type=\”button\” value=\”say\” onclick=\”sayHello()\”/> </body> </html> 要注意的是：你的flex项目工程需要发表到http的应用服务器（如tomcat、jboss、iis）这些服务器中，用http请求方式才能调用到页面内容和JavaScript方法。如果不发布到应用服务器中，那样只能在iframe中嵌套远程的http请求的页面，本地静态页面是无法显示的。