1、在 Flex 中嵌入完整 HTML 页面时间:2006-05-02 00:00 来源 :BitsCN.com 整理 作者: 中国网管联盟 点击:2831 次有时候我们需要在 Flex 应用中嵌入 HTML 代码，根据嵌入 HTML 要求的不同有以下两种方法： 1、Flex 文本组件（Label、Text、TextArea）的 htmlText 属性支持一些基本的 HTML 代码，例如： this is a html code 2、我们可以将 Flex 应用嵌入到 HTML 页面中，然后通过 Flex2 中的ExternalInterface(Flex1.5 使用 getURL(“javasc
2、ript:javascriptMethod“)来实现 Flex 与 HTML javascript 的相互交互，进一步的，如果要在 Flex 应用中嵌入完整的HTML 呢？ 其实实现的方法很简单，只需要使用 HTML 的 Iframe 标签来导入需嵌入的 HTML 页面，然后使用 ExternalInterface 调用相应的 javasript 将该 Iframe 移动到我们 Flex 页面需要嵌入HTML 页面的部分之上就可以了，示意图如下： 中国网管论坛 bbs.bitsCN.com中国网管论坛 bbs.bitsCN.com 也就是说，我们包含 Flex SWF 文件的 HTML 页面主
3、要有三个部分： 1、Flex swf 插件容器，FlexBuilder 自动生成部分 2、HTML Iframe 标签,绝对定位，用来导入 HTML 页面 中国网管联盟 3、移动 Iframe 和在 Iframe 中导入需嵌入 FLEX 中的 HTML 页面的脚本 中国网管论坛 bbs.bitsCN.comfunction moveIFrame(x,y,w,h) var frameRef=document.getElementById(“myFrame“); frameRef.style.left=x; frameRef.style.top=y; frameRef.width=w; fra
4、meRef.height=h; function loadIFrame(url) top.frames“myFrame“.location.href=url; Flex 中的导入 Iframe 页面和移动 Iframe 的代码如下： import flash.external.ExternalInterface; import flash.geom.Point; import .navigateToURL; private var _source: String; private function moveIFrame(): void var localPt:Point = new Point
5、(0, 0); var globalPt:Point = this.localToGlobal(localPt); ExternalInterface.call(“moveIFrame“, globalPt.x, globalPt.y, this.width, this.height); public function set source(source: String): void if (source) if (! ExternalInterface.available) / TODO: determine if this Error is actually needed. The deb
6、ugger build gives the error below. Assuming that this error will not show / up in the release build but havent checked. throw new Error(“The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime
7、are required.“); _source = source; ExternalInterface.call(“loadIFrame“, source); 中国网管论坛 bbs.bitsCN.com 两个方法分别直接调用使用 ExternalInterface.call 调用前面我们提到的 HTML 页面上的两个Javascript 方法。另外一个要注意的是继承自 flash.display.DisplayObject 类的 localToGlobal 方法的使用，该方法将基于 Flash 场景的坐标转换为基于全局本地坐标，也就是浏览器页面坐标： 中国网管论坛 bbs.bitsCN.co
8、m /Flash 场景 0,0 坐标 var localPt:Point = new Point(0, 0); /转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt); 这样就可以在 Flex 页面中嵌入任意的 HTML 页面了，为了方便，Brian 写了个嵌入 HTML页面的代理 IFrame 组件，该组件封装了所有需要的 Flex 端代码: 该 IFrame 组件有个 source 属性用来记录需要载入的嵌入 HTML 页面的地址，每次 source属性更新时，调用 ExternalInterface.call(“loadI
9、Frame“, source) 中国网管论坛 bbs.bitsCN.com调用 javascript 方法 loadIFrame 方法在 HTML 页面中的 IFrame 中载入要嵌入的 HTML 页面。 另外，重载了 Canvas 的 visible 属性，以便在 Canvas 隐藏 HTML 页面中的 IFrame。 如下使用该组件在 Flex 应用中嵌入 HTML 页面方法： 中国网管联盟 www、bitsCN、com以上代码将在我们的 Flex 应用中嵌入本站首页。文章转载自网管之家：http:/ 代码package import flash.display.Sprite;import
10、 flash.events.*;import flash.external.ExternalInterface;import flash.text.TextField;import flash.utils.Timer;import flash.text.TextFieldType;import flash.text.TextFieldAutoSize;public class ExternalInterfaceExample extends Sprite private var input:TextField;private var output:TextField;private var s
11、endBtn:Sprite;public function ExternalInterfaceExample() input = new TextField();input.type = TextFieldType.INPUT;input.background = true;input.border = true;input.width = 350;input.height = 18;addChild(input);sendBtn = new Sprite();sendBtn.mouseEnabled = true;sendBtn.x = input.width + 10;sendBtn.gr
12、aphics.beginFill(0xCCCCCC);sendBtn.graphics.drawRoundRect(0, 0, 80, 18, 10, 10);sendBtn.graphics.endFill();sendBtn.addEventListener(MouseEvent.CLICK, clickHandler);addChild(sendBtn);output = new TextField();output.y = 25;output.width = 450;output.height = 325;output.multiline = true;output.wordWrap
13、= true;output.border = true;output.text = “Initializing.n“;addChild(output);if (ExternalInterface.available) try output.appendText(“Adding callback.n“);ExternalInterface.addCallback(“sendToActionScript“, receivedFromJavaScript);if (checkJavaScriptReady() output.appendText(“JavaScript is ready.n“); e
14、lse output.appendText(“JavaScript is not ready, creating timer.n“);var readyTimer:Timer = new Timer(100, 0);readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);readyTimer.start(); catch (error:SecurityError) output.appendText(“A SecurityError occurred: “ + error.message + “n“); catch (error:
15、Error) output.appendText(“An Error occurred: “ + error.message + “n“); else output.appendText(“External interface is not available for this container.“);private function receivedFromJavaScript(value:String):void output.appendText(“JavaScript says: “ + value + “n“);private function checkJavaScriptRea
16、dy():Boolean var isReady:Boolean = ExternalInterface.call(“isReady“);return isReady;private function timerHandler(event:TimerEvent):void output.appendText(“Checking JavaScript status.n“);var isReady:Boolean = checkJavaScriptReady();if (isReady) output.appendText(“JavaScript is ready.n“);Timer(event.
17、target).stop();private function clickHandler(event:MouseEvent):void if (ExternalInterface.available) ExternalInterface.call(“sendToJavaScript“, input.text);HTML 代码ExternalInterfaceExamplevar jsReady = false;function isReady() return jsReady;function pageInit() jsReady = true;document.forms“form1“.ou
18、tput.value += “n“ + “JavaScript is ready.n“;function thisMovie(movieName) if (navigator.appName.indexOf(“Microsoft“) != -1) return windowmovieName; else return documentmovieName;function sendToActionScript(value) thisMovie(“ExternalInterfaceExample“).sendToActionScript(value);function sendToJavaScri
19、pt(value) document.forms“form1“.output.value += “ActionScript says: “ + value + “n“;Initializing.1. 2. 3. 4. 73. 74. IFremaDemo.mxml 文件如下： Java 代码 1. 2. 3. 4. 当然少不了 js 代码，IFremaDemo.html 网页是 Flex Builder3 自动生成的，然后需要加上以下代码： Java 代码 1. 2. function moveIFrame(x,y,w,h) 3. var frameRef=document.getElemen
20、tById(“myFrame“); 4. frameRef.style.left=x; 5. frameRef.style.top=y; 6. 7. function loadIFrame(url) 8. document.getElementById(“myFrame“).src=url; 9. 10. 11. function IFrameShow(display) 12. document.getElementById(“myFrame“).style.visibility=display?“visible“:“hidden“; 13. 14. 15. function IFrameOnBulr() 16. 17. /根据 id 获取 flash 实例，ListDemo，可以从 Embed 18. var flash = (navigator.appName.indexOf (“Microsoft“) !=-1)?window“IFremaDemo“:document“IFremaDemo“; 19. /调用 ActionScript 注册的回调方法 20. flash.IFrameOnBulr(); 21. 22. 23.
