转载一:
提及AS3与外部脚本的交互,笔者认为可以总结成两种。一是AS3调用外部函数,二是外部脚本调用AS3函数。无外乎就 这两种。在调用函数的同时,我们还可以向函数传递一些参数。这就达到了传递数据的目的。举一个最简单的例子。我们平时在网络上看视频的时候,这些用AS3 制作的播放器就是由外部脚本(可能是JS,也可能是ASP或其他脚本)传递给它的视频地址。从而就简化我们的后台程序。有的人会问!你用播放器去读取外部 的XML数据不是也可以吗?确实,当时,当你有成千上万个视频的时候,你不可能输入这么多数据。一是比较麻烦,二来是影响了网页运行的速度。所以,AS3 与外部脚本进行交互是非常重要的。
其 实,我们做的绝大多数带有交互性的FLASH程序都要多多少少与后台的其他语言进行交互。这里,我们就以JS脚本来举例说明交互的过程。当然,AS3与 JS脚本可以说有血缘关系,具体的大家可以去查看一下FLASH的发展历史。好了!废话不多说,我们这就开始讲如何让JS与AS3进行一些信息的交换。本 节中,我们只讲解JS调用AS3中的函数。反向的调用我们将在下一节中进行讲解!
首先,我们新建一个FLASH文档,然后在舞台上绘制一个动态文本,该文本的实例名称为wen_txt。好了!美工的部分就算完成了(我们这里是一个非常简单的实例,不要求太复杂。力求突出重点)!
现 在,我们要在FLASH中建立一个允许被外部调用的函数。那么如何去建立声明这样一个函数呢?我们要使用到一个类,这个类的名字就是 ExternalInterface。很多人都没有太注意过这个类。这个类实际上是在flash.external 包中。这个包是专门用来和外部容器进行通信的。那么对这个ExternalInterface类,它的官方解释是“ExternalInterface 类是外部 API,在 ActionScript 和 Flash Player 的容器之间实现直接通讯的应用程序编程接口,例如,含有 JavaScript 的 HTML 页。”很显然,这里已经提到了JS。好了!下面我们就来写一下脚本吧!如下:
ExternalInterface.addCallback("abcd",yun);
function yun(zi:String):void{
wen_txt.text = zi;
}
我
们看,建立一个可以被外部调用的函数实际上就是使用了
ExternalInterface类的addCallback方法。我们可以从宏观上这样理解。但实际上它的真正作用是将一个函数注册为可从容器调用。
实际上我们的FLASH端就这么简单。好了!保存文件,发布。注意!这里,我发布出来的SWF文件的文件名是ab.swf。
上面我们已经将FLASH端的脚本写好了,下面我们来编写JS代码,其实也是一个HTML网页代码,这个HTML代码中包含JS代码!如下:
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FLASH与JS交互</title>
<script language="JavaScript">
function pageInit() {
sendToActionScript("你好");
}
function sendToActionScript(value) {
window.ExternalInterfaceExample.abcd(value);
}
</script>
</head>
<body >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="ExternalInterfaceExample" width="500" height="500"
>
<param name="movie" value="ab.swf" />
</object>
</body>
</html>
好了!现在将这个网页保存到和ab.swf同一文件夹下,然后运行这个网页。当程序运行的时候,我们就可以看到FLASH中的动态文本会出现“你好”字样!这个过程就是JS调用AS3函数,同时向FLASH传递了一个参数,或者说传递了一组数据。
关于这段JS代码,我们就不多说了。因为涉及到很多JS脚本的只是。大家可以在网上查找相关的资料,就可以明白这段JS脚本的含义了!
本节我们就讲解到这里,下一节我们讲解,FLASH如何向JS传递参数!
书接上文,上次我们讲到JS向FLASH传递参数。本节我们来讲解FLASH向JS传递参数。
先
说说原理吧。实际上我们所浏览的每一个网页都可以看作是一个容器。那何为容器呢?说白了就是一个盒子。在这个盒子里面放着许多东西,包括网页中的文字,图
片,FLASH,脚本,按钮,文本框等。所以,我们的
FLASH如果想访问网页中的JS函数,实际上就是访问上一级中的函数。这种操作相对就要简单一些。因为我们的JS函数对网页中的成员都是公开的,这个网
页中的任何元素都能够调用这个JS函数。同样,FLASH也拥有这样的权限。那么好了!我们来看看在网页中具体是怎样做的。
我们这次先来写网页代码,因为网页这边是接受端。代码如下:
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FLASH与JS交互</title>
<script language="JavaScript">
function sendToJavaScript(value) {
document.forms["form1"].output.value += "\n" + "ActionScript says: " + value;
}
</script>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="ExternalInterfaceExample" width="500" height="500"
>
<param name="movie" value="ab.swf" />
</object>
<form name="form1" onsubmit="return false;">
<textarea cols="60" rows="20" name="output" readonly="true">Initializing...</textarea>
</form>
</body>
</html>
具
体的什么意思笔者在这里就不多说了,属于JS方面的知识,大家可以去查看相关资料。好了下面就是FLASH端的代码了!我们先来做美工界面。画一个输入文
本,实例名为wen_txt,再做一个影片剪辑元件,实例名为 an_mc。好了!美工部分做完了!我们来写脚本。如下:
an_mc.addEventListener(MouseEvent.CLICK,chuan);
function chuan(evt:Event):void {
ExternalInterface.call("sendToJavaScript", wen_txt.text);
}
我们看,其实在FLASH中调用外部的JS函数还是用到了ExternalInterface类。而这次我们是使用的call方法。
好了!运行网页,我们在FLASH的输入文本中输入一串文字,然后按一下按钮。之后这段文字就会出现在网页的文本框里面!
大家可以自己动手做一次,体会一下FLASH向JS传递参数的过程!
js与as3相互通信、调用问题
(
这几天在学FLASH的AS3编程,觉得挺有意思的。以前觉得FLASH与AS3的相互调用很神奇,现在一看,还是挺简单的,吧代码贴上来。
AS代码:
import flash.external.ExternalInterface;
ExternalInterface.call("jscall",‘abc‘); //as调用JS方法,jscall为js的函数名,后面的为参数,可以传递多个参数
txt.text = ‘text2‘;
ExternalInterface.addCallback("jscallfun",getASFun); //提供给JS调用的AS方法
function getASFun(value:String):void {
txt.text = value;
}
HTML部分:
<script language="javascript">
function thisMovie(movieName)
{
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}
window.onload = function(){ //此行代码必不可少,如果不用此事件,由于打开页面后,FLASH加载需要时间,可能FLASH还没有加载进来就已经执行到此函数了,从而导致调用失败
thisMovie("FlashID").jscallfun(‘中国‘);
}
//alert(thisMovie("FlashID"));
function jscall(str)
{
alert(str);
}
</script>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="800">
<param name="movie" value="test1.swf" />
<param name="quality" value="high" />
<param name="swfversion" value="8.0.35.0" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<embed
src="test1.swf" quality="high" wmode="transparent" width="800"
height="800" name="FlashID" align="middle" allowFullScreen="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
网页JS调用FLASH 小教程
在网页上用JS调用FLASH程序,比如一个视频网站,按照动态服务器程序产生一个URL,点击后,可以在预先制作完成
的FLASH 播放器来播放.这次的小教程,只是简单的讲下,用JS调用AS程序,其实FLASH 8在这方面的资料很多.突然发现,从FLASH
2004到FLASH 8,FLASH资料多了很多啊.不过我们这次是说FLASH CS3,于时俱进嘛.
首先,我们先打开FLASH制作接受端口程序来监听JS发送的事件:(我们这次的目的是发送一组字符,很简单的,如果往复杂了做,也是同样的道理)
在FLASH CS3舞台上随便放个动态文本,把实例命名:astxt.接着输入代码:
//用ExternalInterface.addCallback来接受网页上用JS写的JsFunction程序,而beCalled是说明FLASH在
//接收到JS的时候,所发生的事件.
ExternalInterface.addCallback("JsFunction",beCalled);
//txtVar是从JS程序传送过来的变量.
function beCalled(txtVar):void {
astxt.text = txtVar;
}
下面是在网页中写的代码,为了简化代码,我这里就写主要的几个地方.首先在FLASH下面插入一个
<div>
<form name="jsForm">
<input type="text" size="10" value="你好" name="texts"></input>
<input type="button" value="点我啊"
<!-- 下面的代码就是点击网页上的代码后,所调用的程序,注意这个程序叫"callAS3"是放在
<head></head>之内的.document.jsForm.texts.value就是需要传递的变量
-->
onclick="callAS3(document.jsForm.texts.value)">
</form>
</div>
在之内写上网页按钮点击后所调用的程序.
<script language="javascript" type="text/javascript">
function callAS3(varText){
if(navigator.appName.indexOf("Microsoft") != -1){
//你们可看到JsFunction就是FLASH程序里监听的程序.而JsToAs就是我产生
//的SWF的名字,varText那就是变量参数拉.
JsToAs.JsFunction(varText);
}
else{
window.document.JsToAs.JsFunction(varText);
}
}
</script>
看,这就完成了用JS来调用FLASH.你可以在网页里的input里写入几个字符,点击按钮后,FLASH里的TEXT里就会出现你在网页上所输入的字符.
---------------------------------------------------------------------------
反过来,如何用FLASH里的程序调用JS呢?也简单在刚才的FLASH里继续写.
//在舞台上放一个Button,命名为:btn.
btn.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void {
//asFunction就是我们要在网页里写的程序.
ExternalInterface.call("asFunction","哈哈,我是来自FLASH");
}
//按钮点击后,就会把"哈哈,我是来自FLASH"这句话传递到网页里.你可以在网页里建立一个TEXT来接收
//这个参数.;
[code]
在网页里的<body></body>之内写上
<form name="form2">
<input type="text" size="10" name="accept"></input>
</form>
在网页的<head></head>里写上
<script language="javascript" type="text/javascript">
function asFunction(varText) {
document.form2.accept.value= varText;
}
</script>
OK,这样网页 就可以从FLASH接受参数,或者由FLASH来调用外部的JS.
转载二:
不管是as调用js,还是js调用as,其实都围绕ExternalInterface。ExternalInterface 类是外部
API,这是一个在 ActionScript 和 Flash Player
容器之间实现直接通信的应用程序编程接口。当然插入flash的html标签中<param name=‘allowScriptAccess‘ value =‘always‘ /> 不能为never,如果设置成never一下所有都是空谈了,一般情况下都设置成always,它也可以接受具体的domain或者IP。
ExternalInterface有两个提供相互调用的静态方法:
/** * @param functionName {String} * @param closure {Function} * @usage 将 ActionScript 方法注册为可提供外部js调用。 */ addCallback(functionName:String, closure:Function):void /** * @param functionName {String} * @param arguments {Function} (optional) * @usage 调用页面上的js。 */ call(functionName:String, ... arguments):*
Example 1:
假如页面上有一个叫sayHi的js函数, 如下:
window.onload=function (){ function sayHi(){alert(‘Hello JS‘)} }
要在flash中调用这个函数,可以用两个办法:
navigateToURL(new URLRequest( ‘javascript:sayHi()‘ ), ‘_self‘); //实际上打开一个新窗口,只不过url是javascript:sayHi(),这是土鳖方法 ExternalInterface.call( ‘sayHi‘);// 用到了ExternalInterface类,这种方法也是adobe推荐的做法
运行结果,发现两个都没法执行,这是因为flashplayer只能看到页面上全局的javascript,所以要想能让flash拿到这个js函数,必须暴露出来。修改代码在运行
window.onload=function (){ function sayHi(){alert(‘Hello JS‘)} window[‘sayHi‘] = sayHi; }
代码成功运行了,于是,我们可以总结出一点:提供给flash调用的js函数必须是全局的,获取寄宿在全局对象上的。
有时候我们只用到了flash的功能,而没用到它的UI所以想把flash隐藏,比如做一个即时通讯的东西,只有通讯部分用到了flash,
当尝试把flash设置成display:none的时候,发现js与as根本无法相互调用,所以说如果需要隐藏flash,设置css是行不通的,可以
设置它的宽高为1px来解决。
如果是想在js中调用as方法,需要用ExternalInterface.addCallback注册as方法,让他暴露在flash实例上。比如flash中有这样的方法:
private function sayHi():void{ Alert.show(‘Hi As‘); } External.addCallback(‘jsSayHi‘, sayHi);
这样就可以在js中执行jsSayHi这个代理方法,它会去执行sayHi这个as方法。jsSayHi这个代理方法会寄宿在flash dom元素上,作为dom元素的方法。
window.onload=function (){ document.getElementById(‘flashId‘).sayHi(); }
测试一下,还是发现了问题,有时候能正常运行,但有时候会抛出错误:Uncaught TypeError: Object
#<HTMLObjectElement> has no method
‘jsSayHi‘,这是因为即使当前页面onload了,但是flash中的代码初始化还没运行完,所以还没有把代理方法注册到flash
dom元素上。(查看实例3-jscallas_b.html)
那么,flash有没有类似domready的时间点呢?查看好多资料没看到,但是可以模拟一个。我们认识当flash能正常调用页面上的js时,flash能正常跟js进行交互。我们在页面上定义一个flashready函数,让flash回调。
function flashready(){ document.getElementById(‘flashId‘).jsSayHi(); alert(‘flash is ready‘); }
ExternalInterface.call( ‘flashready‘ );
这样js对as的调用就能100%的成功了。
对于静态资源往往会放在cdn上,比如有一台cdn域名是cdn.com,而主域名确是xxx.com,这样就出现了跨域的问题。浏览器的安全策略导致
ajax不能正常的跨域请求,flash player的安全策略同样不允许flash跨域请求和调用。当遇到跨域时,flash
player会抛出“安全沙箱冲突错误”。其实flash是支持跨域的,只不过要做一些设置。
如果是跨域脚本执行,flash中有Secure.allowDomain(somedomain1,
somedomain2)来允许制定的url请求,somedomain也可以是通配符"*",也就是不做源限制。如果flash的url是https的
链接,则需要用allowInsecureDomain()来做沙箱桥,但如果当前html也是https,那不需要用它。尽量避免使用
allowInsecureDomain会削弱https的安全性。但是在一些国产浏览器中,比如腾讯TT,遨游,360等浏览器中,经常会遇到第一次进
来js能正常调用flash中的as,但是当刷新一次页面,发现调用不成功了。这是因为第二次访问的时候,flash被缓存到了本地,这些浏览器破坏了
flash和浏览器的某种约定,所以导致他们不能相互调用。
这个问题有两个做法:一、当flash文件很小时,用无缓存的方式解决,比如请求后面加随机数。二、延迟Flash的初始化功能。通过将Flash的
ExternalInterface.addCallback初始化时间延后一些(比如500ms),就可以解决这个问题。
顺便提一下,如果是flash中的http/socket等跨域请求,则需要一个叫crossdomain.xml的策略文件。这个文件放在服务器上,如果是跨域请求,在请求真实地址之前会去请求这个安全策略文件。
<cross-domain-policy> <allow-access-from domain=”*.xxx.com”/> <allow-access-from domain=”*.xxx.net”/> <allow-access-from domain=”*.xxxcdn.com”/> <allow-access-from domain=”*.allyes.org”/> </cross-domain-policy>
有人可能会考虑js与as之间频繁的相互调用会带来性能问题。简单的做了下测试
测试代码如下:
function flashready(){ var swf = document.getElementById(‘performance‘), //方案1 //var swf = {‘test‘:function(){return 1}}, //方案2 test = swf.test, i = 10000; var start = + new Date; while(i--){ test.call(swf); } alert(+ new Date - start); }
flashready是一个全局的,提供给flash初始完回调的函数。注意代码中把获取flash dom放到一个变量里,因为dom操作本身开销大,如果不这么做会影响精确性。实验结果如下:
测试项目(测10次取平均值) | chrome 19 | firefox 9 | ie6 | ie7 | ie8 | ie9 |
js调用as 10000次耗时(方案1) | 1747ms | 1083ms | 360ms | 557ms | 485ms | 401ms |
js调用js 10000次耗时(方案2) | 1ms | 4ms | 15ms | 31ms | 15ms | 0ms |
观察结果,虽然说js与as执行的执行要比js与js之间慢很多很多,但是勉强还是能接受的,即使是最慢的chrome,平均调用一次也只需要0.17ms,但还是要尽量减少相互调用的次数,就像减少http请求一样。
综上所述,js与as的安全交互必须满足:
- <param name=‘allowScriptAccess‘ value =‘always‘ />
- flash不能隐藏(display:none)
- 等被调用方初始化完成再去调用,as中可以用ExtercalInterface.call(‘flashready‘)来告知初始化完成
- 跨域执行,必须在flash中设置Secure.allowDomain或者Secure.allowInsecureDomain