- 浏览: 13395 次
最新评论
Flex与Javascript之间的交互
- 博客分类:
- 技术杂绘
最近做的一个项目要用到Flex与Javascrip之间的交互,所以花时间学习了一下。在
网上找了好多关于这方面的文章,但是介绍的都不是很全面,主要是例子程序写的不是很
好,很多都还存在一些问题,download下来后,发现还要做些修改才能运行。
先分别简要介绍一下Flex调用Javascript函数和Javascript调用Flex函数。
1. Flex调用Javascript函数
Flex通过使用ExternalInterface.call()函数来调用Javascript中的方法,此函数的原型为
ExternalInterface.call(function_name:String, parameter:String),参数function_name
是调用的javascript的函数名,parameter是Javacript函数需要的参数。此函数还可以有返回值
,也就是说Javascript函数可以返回一个结果给ExternalInterface.call()这个函数调用.ExternalInterface
封装了对浏览器支持的检查,可以用available属性来查看。
先举个简单的例子:
Javascript函数:
function sayHelloFromJs(message)
{
alert(message); //message是由flex端传过来的
return "echo from javascript:" + message; //返回给Flex端的消息
}
Flex调用:
var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Jav ascript.");
Alert.show(str); //显示javascript端返回的消息
2. Javascript调用Flex函数:
Flex端需要注册和页面交互的Javascript方法。通过ExternalInterface的addCallback()函数实现,
addCallback()函数的原型为addCallback(js_function:String, flex_function:Function),第一个参数
js_function是Javascript可以调用的方法名称,第二个参数flex_function是Javascript回调的Flex方法.
举个简单的例子:
Flex端:
public function sayHelloFromFlex(message:String):String
{
Alert.show(message); //Javascript端传过来的消息
var str:String = "echo from flex:" + message;
return str; //返回给Flex端的消息
}
public function initApp()
{
ExternalInterface.addCallback("sayHelloFromFlex",s ayHelloFromFlex);//注册与页面交互的方法
}
Javascript端:
在javascript端首先要获取swf对象的引用,我们假设我们已经拿到了该引用,为MyFlexApp.
swf的获取将在下面专门介绍。
function testFlexFunc()
{
var strMessage = MyFlexApp.sayHelloFromFlex("Hello, Flex");
alert(strMessage);
}
TestFlexFunc
3. Javascript端获取swf对象的引用:
在Javascript代码中,我们首先要定义一个object标签对象,object标签对象的大概格式
如下:
height='480'
name='test' id='MyFlexApps'>
height="378"
name ="FlexObject"
play="true"
loop="false"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
定义好这个节点标签后,我们还需要在写一个JS函数来获取该swf对象的引用。
function getSWFObject(movieName)
{
if(document[movieName])
{
return document[movieName];
}else if(window[movieName]){
return window[movieName];
}else if(document.embeds && document.embeds[movieName]){
return document.embeds[movieName];
}else{
return document.getElementById(movieName);
}
}
然后上面2中的testFlexFunc()函数的那条调用Flex函数的语句可以改写为: var strMessage = getSWFObject["MyFlexApps"].sayHelloFromFlex("Hello , Flex"); 最后给出一个完整的例子供大家参考,包括Flex端和JS端的完整代码:
Flex代码:
height="160">
Flex: "+ message;
return str;
}
public function initApp():void {
Security.allowDomain("*");
Security.allowInsecureDomain("*");
ExternalInterface.addCallback("sayHelloFromFlex",s ayHelloFromFlex);
}
public function invokeJsFunc():void {
var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Jav ascript.");
Alert.show(str);
}
]]>
Html代码:
function sayHelloFromJs(value){
alert(value);
return "Echo from Js: " + value;
}
function invokeFlexFunc(){
var message = "Hello,Flex.";
var str = getSWFObject("MyFlexApps").sayHelloFromFlex(messag e);
alert(str);
}
function getSWFObject(movieName)
{
if(document[movieName])
{
return document[movieName];
}else if(window[movieName]){
return window[movieName];
}else if(document.embeds && document.embeds[movieName]){
return document.embeds[movieName];
}else{
return document.getElementById(movieName);
}
}
height='160'
name='test' id='MyFlexApps'>
发表评论
-
C#写的COM组件注册问题兼论微软Regasm注册的BUG
2012-07-03 13:43 3669有时间的话,我会 ... -
Flex style - CSS 的使用
2012-07-02 12:14 631Dan Orlando, 软件架 ... -
Flex 拖拽范例
2012-07-02 12:14 602Flex由于在其Framwork里加入了DragDrop管 ... -
Adobe Flex UIComponent LifeCycle
2012-07-02 12:14 657Adobe Flex UIComponent L ... -
实现FLEX 通过AMF跟PHP通信
2012-07-01 09:48 571AMF flex一种远调用 ... -
Flex style - CSS 的使用
2012-07-01 09:48 639Dan Orlando, 软件架 ... -
flex+java整合开发
2012-07-01 09:48 536用Flash Builder 4 beta ... -
Flex学习笔记(1)
2012-07-01 09:48 7191.模块化Module 优点:主应用程序开始时不需马 ... -
[推荐]12-《PHP和MySQL web开发》第6章 面向对象的PHP 学习笔记
2012-06-30 16:11 637[推荐]12-《PHP和MySQL web开发》第6章 面向对 ... -
C++Directx11开发笔记二:Direct3D基础设备的初始化
2012-06-30 16:11 1545C++Directx11开发笔记二:Direct3D基础设备的 ... -
《移动应用的设计与开发》读书笔记
2012-06-30 16:11 1242《移动应用的设计与开 ... -
《高效程序员的45个习惯――敏捷开发修炼之道》 读书笔记(三)
2012-06-30 16:11 667《高效程序员的45个习 ... -
《敏捷软件开发(原则、模式与实践)》笔记
2012-06-30 16:11 773《敏捷软件开发(原则、 ...
相关推荐
flex与ajax交互、flex与javascript交互
flex与javascript交互利用externalinterface.callback函数进行。
Flex与JavaScript交互实例,已测试过
flex和javascript交互.在Flex中可以用ExternalInterface来调用Flex的方法
Flex 与javascript交互、C#读写Cookie代码
自己总结的javascript与flex的交互还算详细
NULL 博文链接:https://fengzheng0603.iteye.com/blog/1513718
Flex3与javascript相互交互验证,可以供开始学习的人做个入门学习
actionscript与javascript交互
flex 和 javascript 交互 测通 flex 和 javascript 测通
Flex 和JavaScript 交互,并且可以传递参数。
与浏览器的通信能够让 你建立一个可以超越Flex 应用本身的应用程序。你可以连接到已有的地址,通过JavaScript 和其他应用程序通信,并且可以和浏览器的历史记录交互,作为开始。ExternalInterface 类 让你能够调用...
ASP中调用Flex,actionscript与javascript交互,将flex放置在特定的位置。
删除swf这里需要提醒下,因为embedSWF是替换标签,而不是填充。
如果一切正常,那么点击"与flash交互"的Ext按钮;如果一切正常,那么可以在Flash对象中看到“这是一个测试值!!!”;然后在对象中的“发送消息到JavaScript”按钮上面的文本域输入“到JavaScript中去”,然后点击...
@ twilio-labs / plugin-flex Twilio CLI插件可与进行交互该插件为添加了功能,以便在本地开发,构建和部署; 它使用 。要求安装Twilio CLI 通过npm或yarn : $ npm install -g twilio-cli$ yarn global add twilio-...
flex与JS的交互,简单的DEMO。用美图秀秀的上传和美化作为案例。功能演示详见新浪微博。
接着剖析了Flex与Java的通信机制,以及Flex企业应用的客户端架构和服务器端架构;再接着详细讲解了BlazeDS框架的使用方法和工作原理,并通过迭代的方式完整地演示一个真实的Flex企业级应用的开发全过程,实战性极强...
动机我注意到很多学生对如何使用flex和grid CSS属性存有持续的误解,并因此想做一个交互式工具供他们使用,以弄清楚如何在自己的工作中正确应用这些属性,因此我完成了这个项目。技术该项目是使用React,Redux和...
9:添加與JS交互代碼(Copy 網上的),這個函數必須要在IE7以上才能調用。 #region CallJavaScript 成员 private void CallJavaScript(string code) { Type typeIOleObject = this.GetType().GetInterface(...