zoukankan      html  css  js  c++  java
  • 在Flex (Flash)中嵌入HTML 代码或页面—Flex IFrame

    在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源代码

    欢迎关注我的博客:http://hoojo.cnblogs.com

    http://blog.csdn.net/IBM_hoojo

    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请求的页面,本地静态页面是无法显示的。

  • 相关阅读:
    linux驱动开发学习一:创建一个字符设备
    如何高效的对有序数组去重
    找到缺失的第一个正整数
    .NET不可变集合已经正式发布
    中国人唯一不认可的成功——就是家庭的和睦,人生的平淡【转】
    自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
    ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
    自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
    ServiceStack 介绍
    一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
  • 原文地址:https://www.cnblogs.com/james1207/p/3260303.html
Copyright © 2011-2022 走看看