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

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

赞 (0)

相关推荐

  • Html中 IFrame的用法及注意点

    0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (window.parent.[IFRAME外壳的某方法]) { top.location.href = "Login.aspx"; } 2.再来段比较好看的iframe <script type="text/javascript"> function SetWinHe

  • 设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

    重现如下: 复制代码 代码如下: <!doctype html> <html> <head> <title>设置iframe的document.designMode后仅Firefox中其body.innerHTML为br</title> <meta charset="utf-8"> </head> <body> <iframe frameborder="1" sty

  • js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    <iframe id= "myframe" ></iframe> W3C的标准告诉我们,可以通过Dom对象的contentDocument属性来返回文档对象. 即 复制代码 代码如下: doc= document.getElementById('myframe' ).contentDocument 但对IE浏览器来说,经过测试,IE6,IE7都不支持,IE8开始支持了. 在IE下,需要这样来访问 复制代码 代码如下: document.frames['myfra

  • js取得html iframe中的元素和变量值

    上周想要取得iframe中的元素和js变量值,一直没取得,查资料得知: 不能用$(document).ready()方法,而是要用$("#iframeId").load()方法,待iframe加载完成,才能取得 取iframe中的js变量值: document.frames['x'].y 这样便可以. 哎,很简单的问题,搞了很长时间,不应该啊!

  • 让iframe自适应高度（支持XHTML，支持FF）

    先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.innerHeight && window.scrollMaxY) {                      xScroll = document.body.scrollWidth;               yS

  • 让iframe自适应高度（支持xhtml）IE firefox兼容

    获取页面高度,窗口高度,滚动条高度等参数值 document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = docume

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

    在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就

  • 如何在HTML 中嵌入 PHP 代码

    对于一个有经验的 PHP Web 开发者,这是一件非常容易的事情.但是对于刚开始接触 PHP 编程语言的新手这就是一个问题.所以这里介绍如何在常规的 HTML 代码中嵌入 PHP 代码. 在常规的 HTML 中嵌入 PHP 代码 创建一个 hello 脚本,命名为 hello.php: <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p&g

  • iOS汇编入门教程之在Xcode工程中嵌入汇编代码的方法

    简介 上一篇文章ARM64汇编基础中介绍了汇编在iOS开发中的应用以及ARM汇编基础知识,本文将介绍在C或Objective-C构成的工程中如何嵌入汇编代码. 注意 在调试ARM汇编时,Xcode的Build对象必须为真机,如果对象为模拟器则是x86汇编. 内联汇编 汇编与C间接通信 在函数中可以直接插入汇编代码来影响函数的运行逻辑,使用的语法为编译指令 __asm__ ,注意插入汇编有可能会被编译器忽略,因此需要加入 __volatile__ 修饰符保证汇编代码有效. 下面给出一个简单的例子,

  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件. 比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容. 用ng-content标签,将父组件模板中包含的menu标签内容加到指定位置.select属性支持css选择器,如:"#id",".class","[name=value]"等 header组件的模板: <p> {{title}} </p> <

  • VBScript教程 第二课在HTML页面中添加VBscript代码

    VB教程 > 第二课在HTML页面中添加VBscript代码 SCRIPT 元素用于将 VBScript 代码添加到 HTML 页面中. <SCRIPT> 标记 VBScript 代码写在成对的 <SCRIPT> 标记之间.例如,以下代码为一个测试传递日期的过程: <SCRIPT LANGUAGE="VBScript"> <!--Function CanDeliver(Dt)CanDeliver = (CDate(Dt) - Now())

  • HTML中嵌入PHP的简单方法

    HTML中嵌入PHP的简单方法

    我们以一个提交订单和显示订单信息的例子为学习PHP的开始.这个例子包含两个文件.一个提交订单的html文件:orderform.html,一个显示订单信息的php文件:processorder.php.我将这两个文件放在test_1文件夹下,将test_1文件夹放在htdocs目录下. 文件的组织形式如下图所示,使用xampps安装的集成环境. 提交订单的html文件orderform.html如下所示: <form action="processorder.php" metho

  • 易语言代码中嵌入汇编/机器码方法

    很多朋友在编写易语言里要混合插入汇编语言等,如何解决呢?我们来看下 我们都知道,C++或Delphi的程序源代码中可以嵌入汇编代码,以达到某些特定目的.易语言作为实用而又功能强大的编程语言,也允许在代码中嵌入汇编,--当然严格来说,是嵌入机器指令代码.借助"特殊功能支持库"中的"置入代码"命令,可以完成这项功能.(liigo 2009.03.20补记:自易语言4.12版本起,"置入代码"已被移入核心支持库.) 为什么要在易语言中"置入代

  • Flex4 DataGrid中嵌入RadioButton实现思路及代码

    <s:DataGrid id="viewDg" width="100%" height="100%" fontFamily="微软雅黑" horizontalScrollPolicy="off" borderVisible="false" dataProvider="{viewList}"> <s:columns> <s:ArrayLis

  • PHP生成Flash动画的实现代码

    PHP生成Flash动画的实现代码

    其中有一组映射到 SWF 动画中的数据类型的对象:子图形.图形.文本.位图等等.在本文中,我使用了预编译的扩展 php_ming.dll 库用于 Windows 版本的 PHP. 清单 2 显示了使用 Ming 库实现的 HelloWorld 示例. 清单 2. Hello.php <?php$f = new SWFFont( '_sans' ); $t = new SWFTextField();$t->setFont( $f );$t->setColor( 0, 0, 0 );$t-&

  • Flex Flash的关系分析

    1.Flex应用程序的生命周期 Flex应用就其根本上讲就是Flash应用,只不过其是基于Flex Framework(由ActionScript写就)开发的.Flex应用程序的根对象的是SystemManager(不是我们在flex应用上看到的Application根元素),继承自flash.dispaly.MovieClip-flash player display type,MovieClip是一种支持timeline基本元素帧frame的对象,在Flex Framework中System

随机推荐