Flex嵌入HTML页面

这段时间一直在苦心研究Flex，今天突然想，我们平时都是把swf放到网页中，怎么才能把网页嵌入到Flex中呢？我查了一些资料，然后经过自己的不懈努力，终于搞定。

为了方便，写了个嵌入HTML页面的代理IFrame组件，该组件封装了所有需要的Flex端代码，后面只要通过标签调用就OK了。

IFrame.mxml文件如下:

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)" initialize="init();">
3. <mx:Script>
4. <![CDATA[
5. import mx.controls.Alert;
6. import flash.external.ExternalInterface;
7. import flash.geom.Point;
8. import flash.net.navigateToURL;
9. private var __source: String;
10. //Flash场景0,0坐标 var localPt:Point = new Point(0, 0);
11. //转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt);
12. //这样就可以在Flex页面中嵌入任意的HTML页面了，为了方便，
13. public function moveIFrame():void
14. {
15. var localPoint:Point = new Point(0, 0);
16. var globalPoint:Point = this.localToGlobal(localPoint);
17. ExternalInterface.call("moveIFrame", globalPoint.x, globalPoint.y, this.width, this.height);
18. }
19. //调用javaScript的loadIFrame方法，设置IFrame的src(URL)
20. public function set source(source: String): void {
21. if (source)
22. {
23. if (!ExternalInterface.available)
24. {
25. Alert.show("The ExternalInterface is not available in this container. Internet Explorer ActiveX, " +
26. "Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
27. }
28. __source = source;
29. //Alert.show(source);
30. ExternalInterface.call("loadIFrame",source);
31. }
32. }
33. //初始化时注册供javaScript调用的方法
34. public function init():void
35. {
36. ExternalInterface.addCallback("IFrameOnBulr",showIFrameAgain);
37. }
38. //javaScript调用IFrameOnBlur方法时的处理方法
39. public function showIFrameAgain():void
40. {
41. this.source=this.__source;
42. this.showIFrame=true;
43. this.moveIFrame();
44. }
45. //调用javaScript的IFrameShow方法，设置IFrame的可见状态
46. public function set showIFrame(display:Boolean):void
47. {
48. ExternalInterface.call("IFrameShow",display);
49. }
50. public function get source(): String {
51. return __source;
52. }
53. //重载了Canvas的visible属性，以便在Canvas隐藏HTML页面中的IFrame
54. override public function set visible(visible: Boolean): void
55. {
56. super.visible=visible;
57. if (visible)
58. {
59. ExternalInterface.call("showIFrame");
60. }
61. else
62. {
63. ExternalInterface.call("hideIFrame");
64. }
65. }
66. ]]>
67. </mx:Script>
68. </mx:Canvas>
69. IFremaDemo.mxml文件如下：
70. • <?xml version="1.0" encoding="utf-8"?>
    • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:zq="*">
    • <zq:IFrame mouseUp="Iframe.showIFrame=true;Iframe.moveIFrame();Iframe.source=Iframe.source" source="http://weather.news.qq.com/inc/ss258.htm" x="240" y="23" width="190" height="190"/>
    • </mx:Application>

    当然少不了js代码，IFremaDemo.html网页是Flex Builder3自动生成的，然后需要加上以下代码：

1. <script>
2. function moveIFrame(x,y,w,h) {
3. var frameRef=document.getElementById("myFrame");
4. frameRef.style.left=x;
5. frameRef.style.top=y;
6. }
7. function loadIFrame(url){
8. document.getElementById("myFrame").src=url;
9. }
10. function IFrameShow(display){
11. document.getElementById("myFrame").style.visibility=display?"visible":"hidden";
12. }
13. function IFrameOnBulr()
14. {
15. //根据id获取flash实例，ListDemo，可以从Embed
16. var flash = (navigator.appName.indexOf ("Microsoft") !=-1)?window["IFremaDemo"]:document["IFremaDemo"];
17. //调用ActionScript注册的回调方法
18. flash.IFrameOnBulr();
19. }
20. </script>
21. <iframe name="myFrame" onblur="this.style.visibility='visible';IFrameOnBulr();" width="189" height="190" marginwidth="0" marginheight="0" hspace="0" vspace="0" frame scrolling="no" ></iframe>

转自:http://www.cnblogs.com/YNLDY/archive/2012/02/07/2340968.html