这段时间一直在苦心研究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文件如下
    • <?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" id="Iframe" 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 id="myFrame" name="myFrame" onblur="this.style.visibility='visible';IFrameOnBulr();" width="189" height="190" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" style="position:absolute;"></iframe>

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

Flex嵌入HTML页面的更多相关文章

  1. [Flex] IFrame系列 —— 嵌入本地页面两种方式source和content(html页面和html代码)

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  2. WebIM(5)----将WebIM嵌入到页面中

    在之前的文章中,已经开发了一个简单的WebIM,但是这个WebIM是在独立的页面中的,今天发布的WebIM是一个可以嵌入到自己网页中的版本,你只需添加少量的代码,就可以在页面中嵌入一个WebIM.不过 ...

  3. iPhone的App嵌入html页面问题

    测试环境:iPhone ios 11.0.3 问题:iPhone App嵌入HTML页面,页面拉动到底部时,手势从屏幕底部边缘开始往上拉动,页面出现白色图层,且html页面一屏外的会卡住,无法滚动,需 ...

  4. react native (2) 嵌入h5页面 设置顶部导航

    嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...

  5. vue在页面嵌入别的页面或者是视频2

    vue在页面嵌入别的页面或者是视频 以下是嵌入页面 <iframe name="myiframe" id="myrame" src="http: ...

  6. Saiku通过iframe嵌入web页面(六)

    Saiku通过iframe嵌入系统页面 前提: Saiku已安装好,并且配置了数据源,熟练了saiku的基本使用. 一.将整个Saiku嵌入页面 在web项目中,新建index.jsp页面,内容如下: ...

  7. SVG系列教程:SVG简介与嵌入HTML页面的方式

    地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁 ...

  8. SSI注入--嵌入HTML页面中的指令,类似jsp、asp对现有HTML页面增加动态生成内容,见后面例子

    SSI注入漏洞总结 from:https://www.mi1k7ea.com/2019/09/28/SSI%E6%B3%A8%E5%85%A5%E6%BC%8F%E6%B4%9E%E6%80%BB%E ...

  9. 安卓 apk 嵌入H5页面只显示部分

    安卓 apk 嵌入H5页面只显示部分(有空白页出现) 解决方案 没有加载的是js部分,需要在安卓那边加上一串代码 webView.getSetting().setDomStorageEnabled(t ...

随机推荐

  1. 一个Java编写的小玩意儿--脚本语言解释器(一)

    今天开始想写一个脚本语言编译器.在这个领域,我还是知道的太少了,写的这个过程肯定是艰辛的,因为之前从来没有接触过这类的东西.写在自己的博客里,算是记录自己的学习历程吧.相信将来自己有幸再回过头来看到自 ...

  2. prevent to do sth 与 prevent sb (from) doing 用法

    prevent to do sth 如: Do not water in before making a turn every time 9 days, make wilting of its bra ...

  3. scroll offset & client总结

    oEvent.clientX 是指鼠标到可视区左边框的距离. oEvent.clientY 是指鼠标到可视区上边框的距离. clientWidth  是指可视区的宽度. clientHeight  是 ...

  4. 页面定制CSS代码

    博客皮肤:SimpleMemory .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border- ...

  5. uva1412 Fund Management

    状压dp 要再看看  例题9-17 /* // UVa1412 Fund Management // 本程序会超时,只是用来示范用编码/解码的方法编写复杂状态动态规划的方法 // Rujia Liu ...

  6. vuez init webStorm

    <!-- * @description text !--> <template> <div>#[[$END$]]#</div> </templat ...

  7. 油猴 tamperMonkey 在百度首页 添加自己的自定义链接

    发现 GM_addStyle 函数不能用了,从写加载css函数. 剩下找个定位 添加内容 就很简单了. // ==UserScript== // @name helloWorld // @namesp ...

  8. Eclipse 下载 开源项目 maven依赖丢失和 Deployment Assembly 丢失

    周末下载了最新的jeecg的源码来瞅瞅,但是下载后发现,pom文件中定义的依赖都丢失了. 如下图 上网搜索了一下啊,发现需要先给这个项目这个项目 disable maven nature 然后再添加上 ...

  9. Vickers Vane Pump - How To Choose Vane Pump Parameter Specifications?

    1 rated pressure selection. The rated pressure of the vane pump products is 7MPa, 1OMPa, 16MPa, 2lMP ...

  10. xcode菜单栏

    File  文件 Edit  编辑 View 视图 Navigate 导航 Editor 编辑 Product 产品 Window  窗口 Help 帮助 File  文件 New 新建        ...