转载：js和as间的交互

时间 2019-11-17

原文原文链接

转载一：javascript

说起AS3与外部脚本的交互，笔者认为能够总结成两种。一是AS3调用外部函数，二是外部脚本调用AS3函数。无外乎就这两种。在调用函数的同时，咱们还能够向函数传递一些参数。这就达到了传递数据的目的。举一个最简单的例子。咱们平时在网络上看视频的时候，这些用AS3 制做的播放器就是由外部脚本（多是JS,也多是ASP或其余脚本）传递给它的视频地址。从而就简化咱们的后台程序。有的人会问！你用播放器去读取外部的XML数据不是也能够吗？确实，当时，当你有成千上万个视频的时候，你不可能输入这么多数据。一是比较麻烦，二来是影响了网页运行的速度。因此，AS3 与外部脚本进行交互是很是重要的。css

其实，咱们作的绝大多数带有交互性的FLASH程序都要多多少少与后台的其余语言进行交互。这里，咱们就以JS脚原本举例说明交互的过程。固然，AS3与 JS脚本能够说有血缘关系，具体的你们能够去查看一下FLASH的发展历史。好了！废话很少说，咱们这就开始讲如何让JS与AS3进行一些信息的交换。本节中，咱们只讲解JS调用AS3中的函数。反向的调用咱们将在下一节中进行讲解！html

首先，咱们新建一个FLASH文档，而后在舞台上绘制一个动态文本，该文本的实例名称为wen_txt。好了！美工的部分就算完成了（咱们这里是一个很是简单的实例，不要求太复杂。力求突出重点）！java

现在，咱们要在FLASH中创建一个容许被外部调用的函数。那么如何去创建声明这样一个函数呢？咱们要使用到一个类，这个类的名字就是 ExternalInterface。不少人都没有太注意过这个类。这个类其实是在flash.external 包中。这个包是专门用来和外部容器进行通讯的。那么对这个ExternalInterface类，它的官方解释是“ExternalInterface 类是外部 API，在 ActionScript 和 Flash Player 的容器之间实现直接通信的应用程序编程接口，例如，含有 JavaScript 的 HTML 页。”很显然，这里已经提到了JS。好了！下面咱们就来写一下脚本吧！以下：ajax

ExternalInterface.addCallback("abcd",yun);
function yun(zi:String):void{
wen_txt.text = zi;
}chrome

我们看，创建一个能够被外部调用的函数实际上就是使用了 ExternalInterface类的addCallback方法。咱们能够从宏观上这样理解。但实际上它的真正做用是将一个函数注册为可从容器调用。实际上咱们的FLASH端就这么简单。好了！保存文件，发布。注意！这里，我发布出来的SWF文件的文件名是ab.swf。编程

上面咱们已经将FLASH端的脚本写好了，下面咱们来编写JS代码，其实也是一个HTML网页代码，这个HTML代码中包含JS代码！以下：跨域

<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 onload="pageInit();">
     <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也拥有这样的权限。那么好了！咱们来看看在网页中具体是怎样作的。

咱们此次先来写网页代码，由于网页这边是接受端。代码以下：

<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部分：

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>

网页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>

<input type="button" value="点我啊"

<!-- 下面的代码就是点击网页上的代码后,所调用的程序，注意这个程序叫"callAS3"是放在

<head></head>以内的.document.jsForm.texts.value就是须要传递的变量

-->

onclick="callAS3(document.jsForm.texts.value)">

</form>

</div>

在以内写上网页按钮点击后所调用的程序.

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>

在网页的<head></head>里写上

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和浏览器的某种约定，因此致使他们不能相互调用。
     这个问题有两个作法：1、当flash文件很小时，用无缓存的方式解决，好比请求后面加随机数。2、延迟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