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

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码流打包分析(精华)

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

postman安装和简单使用

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

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

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

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

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

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 …

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 …

【第二章】 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

网站&#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…

广播、组播、点播的区别

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

Arm架构下VUE环境的安装

最近因为项目需要在arm环境下搭建vue环境&#xff0c;网上有基于Linux的 教程&#xff0c;路径略有不同&#xff0c;现整理如下 1、安装文件下载 1、下载地址&#xff1a;http://nodejs.cn/download/ 2、选择一个合适的版本下载 2、安装步骤 1、将安装包上传到指定位置(我习惯放…

网络安全技术之端口隔离

端口隔离技术是一种实现在客户端的端口间的足够的隔离度以保证一个客户端不会收到另外一个客户端的流量的技术。通过端口隔离技术&#xff0c;用户可以将需要进行控制的端口加入到一个隔离组中&#xff0c;实现隔离组中的端口之间二层、三层数据的隔离&#xff0c;既增强了网络…

python解释器、pycharm安装及环境变量配置

python解释器、pycharm安装及环境变量配置 1.python解释器安装 下载地址&#xff1a;https://www.python.org/ 打开官网&#xff0c;点击downloads,选择操作系统&#xff0c;以windows为例&#xff1a; 选择python2与python3解释器版本&#xff08;以python3.6.6及python2.7.16…

RHEL6.4 Keepalive+LVS(DR)部署文档

1、简介LVSKeepalived 能实现的功能:利用 LVS 控制器主备模式避免单点故障以及自动删除故障 WEB 服务器结点并当它恢复后再自动添加到群集中。拓扑图:2、系统环境系统平台:RHEL6.4硬件平台:dell R720*4硬件参数:cpu(e5-2609)两颗;内存 32G;磁盘 600G*6;RAID 5 ;双电源LVS 版本:…

非阻塞I/O多路复用机制

题外话&#xff1a;我们现在要仔细的说一说I/O多路复用机制&#xff0c;因为这个说法实在是太通俗了&#xff0c;通俗到一般人都不懂是什么意思。博主打一个比方&#xff1a;小曲在S城开了一家快递店&#xff0c;负责同城快送服务。小曲因为资金限制&#xff0c;雇佣了一批快递…

Windows平台WebRTC编译-VS2017

转载网站&#xff1a;https://blog.jianchihu.net/webrtc-build-vs2017.html 在音视频领域&#xff0c;想深入研究的话&#xff0c;必定会接触WebRTC。WebRTC是一个庞大的工程&#xff0c;就像是音视频领域的百科全书&#xff0c;音视频采集&#xff0c;编解码&#xff0c;传输…

Hadoop--初识Hadoop

什么是Hadoop&#xff1f; 搞什么东西之前&#xff0c;第一步是要知道What&#xff08;是什么&#xff09;&#xff0c;然后是Why&#xff08;为什么&#xff09;&#xff0c;最后才是How&#xff08;怎么做&#xff09;。但很多开发的朋友在做了多年项目以后&#xff0c;都习惯…

VS2019编译 当前最新版chromium

VS2019编译 当前最新版chromium 之前编译过webrtc和chromium&#xff0c; 由于长时间没用&#xff0c;被我删除了&#xff0c; 最近在最新版本的google浏览器上遇到了播放器兼容性问题&#xff0c;老版本的google浏览器是没问题&#xff0c;IE, 火狐浏览器也没问题&#xff0…

37signals为何砍掉中层?个人点评,高素质人才队伍工作,靠的是全体发挥综合能力,而不是靠......

为什么80%的码农都做不了架构师&#xff1f;>>> 37signals为何砍掉中层? 分享到 本文来源于&#xff1a;中欧商业评论 作者&#xff1a;潘芸 发表于&#xff1a;2013-08-21 11:09:41 http://www.cyzone.cn/a/20130821/244571.html 37signals有多位程序员&#…