·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

Flash与Javascript通信的分析

时间:2011-06-29 16:3451flash.com
刚开始学习flash as3编程,一些学习笔记也丢上来吧,现在还都是些初级的话题,Flash已经提供了ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法,call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。

  刚开始学习flash as3编程,一些学习笔记也丢上来吧,现在还都是些初级的话题~

  Flash已经提供了ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法,call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。下面是官方文档对call和addCallback的说明:

  利用 ActionScript,可以在 HTML 页上执行以下操作:

  调用任何 JavaScript 函数。
  传递任意数量、具有任意名称的参数。
  传递各种数据类型(Boolean、Number、String 等等)。
  接收来自 JavaScript 函数的返回值。
  通过在 HTML 页上使用 JavaScript,可以:

  调用 ActionScript 函数。
  使用标准的函数调用表示法传递参数。
  将值返回给 JavaScript 函数。
  实际使用的时候,需要注意以下两点:

  一、调用时机。js调用flash对象提供的函数时,可能swf还没有完全加载完,此时调用会失败。类似的,flash调用js函数时,也存在js函数还没load到的情况。所以adobe官方示例里采用了一种比较绕的逻辑来避免这种问题:

  页面上有一个变量_isJSReady,初始为false。还有一个isJSReady函数用来返回_isJSReady的值,供flash调用。在合适的时机(例如:window.onload),将_isJSReady设置为true,表示flash可以使用js里的函数了;
  flash里有一个定时器,定期(例如:100ms)去调用页面上的isJSReady方法,直到isJSReady返回true,就可以addCallback,调用页面上的flashReadyHandler方法,通知页面可以跟flash交互了。
  二、如何获取flash对象。将flash插入到页面有很多方法,例如swfobject.js或者AC_RunActiveContent.js类似的库。我们来看一种最原始的方法,直接在html插入标记来插入flash:

  1. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"   
  2. codebase="http://download.macromedia.com/pub/shockwave/cabs  
  3. /flash/swflash.cab#version=10,0,0,0" width="730" height="520"   
  4. id="test" align="middle">    
  5. <param name="allowScriptAccess" value="sameDomain" />    
  6. <param name="allowFullScreen" value="false" />    
  7. <param name="movie" value="test.swf" />    
  8. <param name="quality" value="high" />    
  9. <param name="bgcolor" value="#ffffff" />        
  10. <embed src="test.swf" quality="high" bgcolor="#ffffff" 
  11. width="730" height="520" name="test" align="middle" allowScriptAccess="always" 
  12. allowFullScreen="false" type="application/x-shockwave-flash"     
  13. pluginspage="http://www.adobe.com/go/getflashplayer_cn" />    
  14. </object> 

  假设test.swf提供了hello的方法,我们来在js里调用这个方法,代码如下:

  document.getElementById("test").hello();
  结果,除了IE之外,其他浏览器都不会工作,会提示找不到hello这个方法。这个问题困扰了我比较久。最后发现:在非IE浏览器里,flash提供的方法是加在embed上的,我们要得到object下的embed对象,调用embed上的方法才会成功!

  官方示例是采用下面方法获取flash对象的:

  1. function getFlashMovieObject(movieName){  
  2.     if (window.document[movieName]){  
  3.       return window.document[movieName];      
  4. }else if (navigator.appName.indexOf("Microsoft")==-1){  
  5.       if (document.embeds && document.embeds[movieName])   
  6.      return document.embeds[movieName];     
  7.  }else{       
  8.  return document.getElementById(movieName);    
  9.   }  

  这里罗列出所有情况,当然不会有问题。其实,没必要弄得这么复杂,我们给object和embed取不同名称,例如一个test1,一个test2,如果是IE就getElementById(“test1”),其它浏览器getElementById(“test2”)就行了。另外,如果使用js插入swf的话,很可能js里就已经做过判断,根据不同浏览器来输出object和embed其中一种。总之,如果调用失败,首先检查得到的flash对象是不是[object HTMLEmbedElement]。

  最后,放上一个例子,是我参照官方文档写的。

补充一个细节:在傲游里,刷新页面后js调用flash里的方法可能会失败。这篇文章有提到这个问题,解决方法是给swf地址加上随机数,让浏览器每次都重新加载flash。不过这样swf就不能被浏览器缓存,很无语~下面是一段判断傲游的js代码,建议只针对傲游加随机数。

  1. var isMaxthon = false;   
  2.  try {  
  3.       if (external.max_language_id != undefined){  
  4.             isMaxthon = true;  
  5.       }    
  6. }catch (e){}   
  7.  alert(isMaxthon); 

  相关文章:Flash的as3,as2与JS的相互通信终极解密(含演示实例)
       ExternalInterface.addCallback()方法,as2 和as3的区别
       ExternalInterface.call和addCallback测试
       使用externalInterface.addCallback()容易犯的两个错误

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器