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)。
JS 与Flex交互:html中的js 与flex中的actionScript通信相关推荐
- JS Flex交互:html嵌套Flex(swf)
一.html页面嵌套Flex需要用到 swfobject.js swfobject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入F ...
- cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互
使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性.但操作系统和前端之间的交互却是比较复杂的.具体来说就是脚本语言和编译语言的交互.在IE内核中html和css虽然 ...
- android webview调js方法,Android中WebView与H5的交互,Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
- linux和安卓交互,Android中webview和js之间的交互及注意事项
1.Android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
- vue+node.js前后端交互中的token令牌验证
这篇文章分享一下本人学习vue+node.js前后端交互中的登录token令牌的心得 最近准备写一个个人博客网站,前端采用的是vue+element,后端用node.js 在做用户登录的时候就想到 如 ...
- Android Studio开发安卓app 安卓与webview中的js交互
Android Studio开发安卓app 安卓与webview中的js交互 1.webview中的页面调用android中的方法 在Android Studio开发安卓app 封装WEB(H5,UR ...
- Js与flash交互:在html页面中用js与MyReport插件交互
<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t ...
- Flex 学习笔记------as 与 js 的通信
AS 中的ExternalInterface类 可以用于和JS的交互 1. AS 调用 JS AS 调用 JS 主要使用 ExternalInterface.call() 方法: var result ...
- OC WKWebView的JS与OC交互、Cookie管理
完全抄录:iOS中UIWebView与WKWebView.JavaScript与OC交互.Cookie管理看我就够(中) ####WKWebView 是Apple于iOS 8.0推出的WebKit中的 ...
最新文章
- R语言使用ggplot2包使用geom_boxplot函数绘制基础分组箱图(boxplot)实战
- 服务器Linux与Windows固件,Linux与windows服务器系统的区别
- 王道计算机考研 计算机组成原理 第一章、计算机系统概述
- 域名注册商标_科技述说:一起了解网络域名的由来
- kafka学习(一)初识kafka
- java 对日期的加减运算
- mirdeep2使用笔记
- kaliU盘启动配置
- 解决办法:[sqlserver] Cannot connect to XXXX\SQLEXPRESS
- 开源语音Speex丨Windows环境配置和测试(一)
- 多重共线性的解决方法
- 阿里妈妈年赚2500亿:淘宝商家的“曝光焦虑”生意好做吗?
- Python,海龟作图,闪避球小游戏
- 推荐系统实战:新闻推荐系统基本流程
- 【ML】Markov Chain Monte Carlo(MCMC)---Slice sampler(切片采样)和Hierarchical Models(层次模型)
- win7计算机窗口像xp,windows7界面突然变成xp老版本怎么回事?win7界面突然变成老版本的解决方法...
- 我的 网上商城网站布局 练习(含效果图和源码)
- 基于小程序云开发的在线答题小程序源码含答题分类答题记录错题集适合学习适合毕业设计使用
- 密码检查、生成随机密码
- 360真不靠谱,云盘不靠谱 字体不靠谱 安全卫士不靠谱
热门文章
- C++primer第十一章 关联容器 11.3关联容器操作 11.4 无序容器
- 科目三-变更车道,直线行驶和超车的考试标准
- 风雨20年:我所积累的20条编程经验
- H264 解码耗时分析
- webpack 入门,说一下那些不入流的知识点、module.exports{ } 中配置说明
- 什么是 NoSQL 数据库、NoSQL 与 SQL 的区别
- Django路由(url)
- day8-异常处理与网络编程
- BZOJ 1567: [JSOI2008]Blue Mary的战役地图
- hibernate基础工具findBySQL学习