JS 与Flex交互:html中的js 与flex中的actionScript通信

Flex与JavaScript交互的问题，这里和大家分享一下，主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容。

Flex 与JavaScript 交互，主要依靠Flex的ExternalInterface，其提供了addCallBack和call方法。

一.Html页面嵌套Flex

html嵌套Flex需要用到swfobject.js,下载网址http://code.google.com/p/swfobject/

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)为js加载flex的方法。

详细请看：http://blog.csdn.net/allen_oscar/article/details/9744265

如下：

<!DOCTYPE HTML PUBLICd "-//W3C//DTD HTML 4.000%1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS与Flex交互</title>    <script type="text/javascript" src="lib/interaction.js"></script><script type="text/javascript" src="lib/swfobject.js"></script><script>var jsApp;function init(name){this.name = name;//name="flexDiv" flexDiv为 html页面中 <div id="flexDiv">/div><  的idvar flashvars = {};var params = {};attributes = {};params.allowScriptAccess = "always";//安全沙箱params.scale = "nocale";   swfobject.embedSWF("http://192.168.1.102:8088/FlexApp/FlexApp.swf", name,"100%","100%", "10.2.0", "", flashvars, params, attributes);  }</script></head><body  οnlοad="init("flexDiv")"  width="100%" height="100%"><div>     <label> Flex说：</label> <input id="flexSay" /> <input  id="jsinput" value="你好Flex" /> <button >Send</button>  </div>    <table width="100%" height="100%"><td>	<div id="flexDiv" width="100%" height="100%" style="display:block"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>				   </div>	</td>		  </table></body>  </html>

二.JavaScript与Flex交互
 

Flex 与JavaScript 交互，主要依靠Flex的ExternalInterface，其提供了addCallBack和call方法。

ExternalInterface.addCallback("onHello",onHelloFlex);//onHello 为javascript中的方法
ExternalInterface.call("flexCall",flex.text);//调用javascript中的flexCall()方法

ExternalInterface还提供了一些其他的方法：

ExternalInterface.available//对浏览器支持的检查
Security.allowDomain("*"); //允许调用SWF文件中的属性和变量
Security.allowInsecureDomain("*");

三.代码示例

JSApp.html

<!DOCTYPE HTML PUBLICd "-//W3C//DTD HTML 4.000%1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>地图接口</title>    <script type="text/javascript" src="lib/interaction.js"></script><script type="text/javascript" src="lib/swfobject.js"></script><script>var jsApp;function init(){jsApp = new LoadFlex("flexDiv");//创建对象 }function sendJS(){try{var str =  document.getElementById('jsinput').value;jsApp.jsToFlex(str);} catch(e){	alert(e.message);}}</script></head><body  οnlοad="init()"  width="100%" height="100%"><div>     <label> Flex说：</label> <input id="flexSay" /> <input  id="jsinput" value="你好Flex" /> <button onClick="sendJS()">Send</button>  </div>    <table width="100%" height="100%"><td>	<div id="flexDiv" width="100%" height="100%" style="display:block"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>				   </div>	</td>		  </table></body>  </html>

interaction.js

	 function LoadFlex(name){this.name = name;var flashvars = {};var params = {};attributes = {};params.allowScriptAccess = "always";params.scale = "nocale";   swfobject.embedSWF("http://192.168.1.102:8088/FlexApp/FlexApp.swf", name,"100%","100%", "10.2.0", "", flashvars, params, attributes);	 this.GetFlex = function(){var mapName = this.name;if (navigator.appName.indexOf("Microsoft") != -1) {return window[mapName];}else {return document[mapName];			}}this.jsToFlex  = function(str){try{var str = this.GetFlex().onHello(str); } catch(e){alert(e.message);}     }}function flexCall(str){// alert(str);document.getElementById("flexSay").value =str}

FlexApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"applicationComplete="init()" creationComplete="oninit()" initialize="oninit()"viewSourceURL="srcview/index.html"><fx:Script><![CDATA[import flash.external.ExternalInterface;import flash.system.Security;import mx.controls.Alert;import mx.events.FlexEvent; public function oninit():void{}public function init():void{Security.allowDomain("*"); //允许调用SWF文件中的属性和变量Security.allowInsecureDomain("*"); if (ExternalInterface.available){try{ExternalInterface.addCallback("onHello",onHelloFlex);//onHello 为javascript中的this.GetFlex().onHello(str); }catch(error:Error){Alert.show(error.message);}} }public	function onHelloFlex(str:String):String{js.text = str;return "你好javaScript";}public function onFlexToJS(ste:String):void{ExternalInterface.call("flexCall",flex.text);//调用javascript中的flexCall()方法} ]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><mx:VBox width="100%" height="100%" horizontalAlign="left" verticalAlign="middle" backgroundColor="#EAE3E3"><s:Panel width="100%" height="500" chromeColor="#1E1E1E" title="javascript   and   flex 交互" color="#FCF9F9" fontWeight="bold" fontSize="14"><mx:VBox height="100%" width="100%"><mx:HBox height="100%"><mx:HBox width="270" height="200" paddingTop="10"><s:Label color="#080808">javaScript说：</s:Label>   <s:TextInput   id="js" color="#020202"/> </mx:HBox><mx:HBox width="380" height="200" paddingTop="10"><s:Label color="#060606">Flex说：</s:Label>	<s:TextInput  text="你好javaScript"  id="flex" color="#020202"/><mx:Button click="onFlexToJS('hell')"    label="send"/></mx:HBox></mx:HBox></mx:VBox>		</s:Panel>	</mx:VBox></mx:Application>

四：图片示例

1.初始化页面

2.点击html页面Send,通过调用this.GetFlex().onHello(str);方法-----》ExternalInterface.addCallback("onHello",onHelloFlex)---》public function onHelloFlex(str:String):String。

 

3.点击flex页面Send，public function onFlexToJS(ste:String):void--》ExternalInterface.call("flexCall",flex.text)--》function flexCall(str)。




 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/462228.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

poj3615

poj3615

floyd水题&#xff0c;将map[i][j]理解为从i到j的路径中高度最小即可&#xff0c;将松弛条件改为map[i][j]MIN(map[i][j],MAX(map[i][k],map[k][j]));好好理解一下吧 View Code 1 #include <stdio.h> 2 #include <string.h> 3 #define MAXN 310 4 #define INF (1&…
阅读更多...
H264码流打包分析(精华)

H264码流打包分析(精华)

网页&#xff1a;https://www.cnblogs.com/lidabo/p/4602422.htmlH264码流打包分析SODB　数据比特串&#xff0d;&#xff0d;&#xff1e;最原始的编码数据RBSP　原始字节序列载荷&#xff0d;&#xff0d;&#xff1e;在SODB的后面填加了结尾比特&#xff08;RBSP trailing b…
阅读更多...
postman安装和简单使用

postman安装和简单使用

postman 模拟向接口发送请求&#xff0c;测试接口 下载 https://www.getpostman.com/downloads/ 使用 朝地址发请求&#xff0c;拿到json格式的数据 想看的层次更分明可以上网搜json 给后端发送数据 转载于:https://www.cnblogs.com/zhengyuli/p/11117632.html
阅读更多...
使用jquery操作iframe

使用jquery操作iframe

1、 内容里有两个ifame <iframe id"leftiframe"...</iframe> <iframe id"mainiframe..</iframe> leftiframe中jQuery改变mainiframe的src代码&#xff1a; $("#mainframe",parent.document.body).attr("src","http:…
阅读更多...
QC使用流程(1)之安装篇

QC使用流程(1)之安装篇

1、准备环境 1.1、安装操作系统 本次教程使用的操作系统是Windows Server 2003&#xff0c;安装在虚拟机6.5上。 1.2、安装数据库 本次教程使用的数据库是Microsoft SQL Server 2000 简体中文企业版 SP4升级补丁 具体安装步骤如下&#xff1a; 1)、打开数据库安装程序&#xff…
阅读更多...
Java连载1-概述常用的dos命令

Java连载1-概述常用的dos命令

本想写完那两个再开始新的&#xff0c;然而客观条件不允许&#xff0c;之前从未接触过Java&#xff0c;从零开始吧​&#xff01;&#xff01;&#xff01; 一、概述 C盘下​&#xff1a;programme file 一般为64位程序安装的目录&#xff0c;programme file&#xff08;X86&am…
阅读更多...
Magento安装后无法访问

Magento安装后无法访问

Magento安装后无法访问&#xff0c;提示“Illegal scheme supplied, only alphanumeric characters are permitted”&#xff0c;找到magento\app\code\core\Mage\Core\Model\Store.php,修改下面代码/** * Check if request was secure * * return boolean */ …
阅读更多...
SQL 查询--日期条件（今日、昨日、本周、本月。。。） (转)

SQL 查询--日期条件（今日、昨日、本周、本月。。。） (转)

主要用到sql 函数 DATEDIFF(datepart,startdate,enddate) sql 语句&#xff0c;设 有 数据库表 tableA&#xff08;日期字段ddate&#xff09; ——查询 今日 select * from tableA where DateDiff(dd,VoucherDate,getdate()) 0 ——查询 昨日 select * from tableA where …
阅读更多...
oracle客户端 tsnping时出现TNS-03505:无法解析名称

oracle客户端 tsnping时出现TNS-03505:无法解析名称

1.检测服务端的监听器有没有启动&#xff1f; lsnrctl status2.检测E:\oracle\oracle10g\NETWORK\ADMIN是否存在 tnsnames.ora 和sqlnet.ora 两个文件,文件内容分别是# tnsnames.ora Network Configuration File: E:\oracle\product\10.2.0\client_1\network\admin\tnsnames.or…
阅读更多...
SRTP参数及数据包处理过程

SRTP参数及数据包处理过程

http://www.rosoo.net/a/201606/17449.html 原链接 目录 1. 相关参数介绍... 1 1.1 SRTP. 1 1.1.1 两种Key. 1 1.1.2 与传输无关的参数... 1 1.1.3 SRTP流相关参数... 2 1.2 SRTCP. 2 1.3 …
阅读更多...
Tomcat 全攻略

Tomcat 全攻略

转自&#xff1a;http://www.ibm.com/developerworks/cn/java/l-tomcat/ 简介 tomcat 是 jakarta 项目中的一个重要的子项目&#xff0c;其被 JavaWorld 杂志的编辑选为 2001 年度最具创新的 java 产品 (Most Innovative Java Product)&#xff0c;同时它又是 sun 公司官方推荐…
阅读更多...
【第二章】 IoC 之 2.1 IoC基础 ——跟我学Spring3

【第二章】 IoC 之 2.1 IoC基础 ——跟我学Spring3

2.1.1 IoC是什么 Ioc—Inversion of Control&#xff0c;即“控制反转”&#xff0c;不是什么技术&#xff0c;而是一种设计思想。在Java开发中&#xff0c;Ioc意味着将你设计好的对象交给容器控制&#xff0c;而不是传统的在你的对象内部直接控制。如何理解好Ioc呢&#xff1…
阅读更多...
排队 题解 组合数学+高精度

排队 题解 组合数学+高精度

因为实在是写不动了&#xff0c;所以菜鸡颓博客为了信奥发展的伟大未来作出一点小小的贡献 题目描述 某中学有 n 名男同学&#xff0c;m 名女同学和两名老师要排队参加体检。他们排成一条直线&#xff0c;并且任意两名女同学不能相邻&#xff0c;两名老师也不能相邻&#xff0c…
阅读更多...
在window下搭建TensorFlow

在window下搭建TensorFlow

网站&#xff1a;https://blog.csdn.net/chduguxue/article/details/793922201.首先查看TensorFlow目前对Windows支持的python版本要求 https://pypi.python.org/pypi/tensorflow/1.1.0rc2截止本文2018年2月27日&#xff0c;要求python是3.5&#xff0c;操作系统64位 如果pytho…
阅读更多...
i++与++i的区别,使用实例说明

i++与++i的区别,使用实例说明

/*** 类名&#xff1a;TEST.java<br>* <p>* 功能&#xff1a;i与i的区别,使用实例说明* </p>* * Author:<a href"mailto:llnyxxzj163.com">lilong</a> <br/>* Date:2013-5-20<br/>* Time:上午11:25:27 <br/>* Versi…
阅读更多...
加减乘除

加减乘除

<script language"javascript">var x2y4document.write("加法:"(xy)"<br>");document.write("减法:"(y-x)"<br>");document.write("乘法:"(x*y)"<br>");document.write("…
阅读更多...
Think in AngularJS：对比jQuery和AngularJS的不同思维模式

Think in AngularJS：对比jQuery和AngularJS的不同思维模式

http://damoqiongqiu.iteye.com/blog/1926475转载于:https://blog.51cto.com/58script/1275438
阅读更多...
Day 02 第二天课时总结

Day 02 第二天课时总结

一 requests请求库爬取豆瓣电影信息 - 请求url https://movie.douban.com/top250 - 请求方式 GET - 请求头 user-agent cookies import requestsimport redef get_page(url): response requests.get(url) return responsedef parse_index(html): movie_list re.fin…
阅读更多...
广播、组播、点播的区别

广播、组播、点播的区别

原网站:https://blog.csdn.net/z502521809/article/details/53007932 今天学习的时候发现了广播、组播、点播这三个用来描述网络节点之间通讯方式的术语&#xff0c;那么这几种“播”到底有什么区别&#xff1f;于是乎百度总结了一下。 ----------------------------------点播…
阅读更多...
函数的加减乘除：

函数的加减乘除：

<script type"text/javascript">//函数的加法 function add(a,b) {return ab; } document.write(add(6,5))</script><script type"text/javascript">//函数的减法 function reduction(a,b) {return a-b; …
阅读更多...
最新文章

Copyright @ 2022~2023