as和js通信最早用的是fscommand,这个我就不说了,老生常谈了,我们这里说的是ExternalInterface这个接口。大家都知道的或者一帮在网上能查到的东西我就不费吐沫了,捡最实在的说。ExternalInterface有两个方法,一个是call,是as调用js,这个没什么说的,我们现在主要说addcallback这个函数,这个函数是as注册一个函数,然后让js通过调用flash这个object对象来调用as注册的这个函数。注意,我这里说的是“js调用flash这个object对象来调用as注册的这个函数”,这里我强调了先调用object对象,然后再调用函数,为什么要这么强调呢,因为大家在开发过程中会遇到两个坎,一个是调用flash对象调用不到,一个是调用函数调用不到了。下面我们就针对这两种情况进行详细说明。
有很多朋友在开发过程中会遇到过下面这些情况,在开发一个js函数上来就调用as的一个函数的时候,页面会报错,提示找不到这个flash对象,或者函数没有定义。Flash8的时代,针对ExternalInterface这个类,文档里只说明了怎么用,而没有具体说怎么合理的组织和页面的结构,一直到了cs3的时代,帮助里才说明了正确的函数注册和js调用的过程,具体的见Flash cs3帮助。大概的代码如下:
js部分:
<script>
var jsReady=false;
var swfReady=false;
function isReady(){
return jsReady;
}
function setSwfIsReady(){
swfReady=true;
getSWF(”flashobj”).fun()
}
function pageInit(){
jsReady=true;
}
function getSWF(movieName) {
if (navigator.appName.indexOf(”Microsoft”) != -1) {
return window[movieName+”_ob”];
} else {
return document[movieName+”_em”];
}
}
οnlοad=function(){
pageInit();
}
</script>
注意,在getSWF函数里我用了 return window[movieName+”_ob”]和return document[movieName+”_em”],为什么这样用我会在下面说明,一帮的情况下只需要用movieName就可以了
as部分
private function registerJsFun():void{
if(ExternalInterface.available){
try{
var containerReady:Boolean=isContainerReady();
//ExternalInterface.call(”ceshi”,”registerJsFun:”+containerReady);
if(containerReady){
//注册函数
setupCallBacks();
}else{
//检测是否准备好
var readyTimer:Timer=new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER,timeHandler);
readyTimer.start();
}
}catch(error:Error){
trace(error)
}
}else{
trace(”External interface is not available for this container.”);
}
}
private function timeHandler(event:TimerEvent):void{
var isReady:Boolean=isContainerReady();
if(isReady){
Timer(event.target).stop();
setupCallBacks();
}
}
private function isContainerReady():Boolean{
var result:Boolean=Boolean(ExternalInterface.call(”isReady”));
return result;
}
private function setupCallBacks():void{
ExternalInterface.addCallback(”fun”,fun);
ExternalInterface.call(”setSwfIsReady”);
}
具体我就不解释了,不明白的同学可以仔细去看下cs3帮助,大概的意思就是页面开始渲染的时候js去调用swf对象,有可能swf对象没有完全load完,所以这个触发器要从flash开始,当flash加载的时候就开始不停的调用页面的一个函数,取一个页面是否加载完毕的标识,当pageonLoad后,这个标识为true了,说明flash也加载完毕了,这个时候flash再开始注册函数,同时调用页面的js,让js调用Flash对象,感觉绕了一大圈,但这是官方推荐的方法。在flash8的时候,我不知道这么用,采用了一种比较笨的办法,就是setTimeout执行addCallback来注册as函数,大家可能要问为什么这么麻烦。我再后面会说明。
好了,现在我举两个最实际的例子,在我开发搜狗音乐盒的时候,因为播放音乐的工作完全交给mediaPlayer这个微软的Object。然后又要在flash里实时的显示歌曲的进度,音量等信息,不得不频繁的在as和js之间不停的调用,那段时间简直痛不欲生。而且mediaPlayer这个对象还有好多版本的内核,从6.4到11,当时我了解了不少这方面的信息,如果有同学对这个感兴趣,可以写mail给我。扯远了,继续说我们这个问题,当时产品上线的时候,在我本机的resin上测试,没有任何的问题,但是一上真实的生产环境,就出问题了,什么问题呢,IE和ff下是没有问题的,问题处在tt(就是腾讯那个浏览器)和遨游浏览器上,清掉浏览器的cache,没有问题,第2次刷新的时候,产生脚本错误,调用as函数失效。而在我本机怎么测都没有问题,后来发现原来是我本机没有设置resin的cache,既没有过期头。为什么一有cache as注册的函数就失效呢,这也是为什么cs3的时候出了一套规范的流程来规定如何使用addCallback,因为flash一旦在浏览器里cache住,如果在as里一开始就addcallback就会失效,至于为什么我到现在也说不清楚,解决的办法就是用官方的办法,如上的代码或者用我当时的笨办法
setTimeOut(registerFun,50)
registerfun就是实现addCallBack的函数,这样就能避免TT和遨游浏览器下如果cache住的时候,addcallback失效的问题。
还有一个办法我没有尝试,就是如果你是 用Flash开发,把displayObject放在第一帧,而addCallback放到第二帧上,为什么这么做呢,这是我从Flex那得到的灵感,在Flex下,这样写,在Application里写
creationComplete=initApp();然后在initApp里addCallback
多说一句,Flex程序是分成两帧,第一帧是preload,第二帧才开始渲染界面,然后在Application下有三种状态preinitialize,initialize,creationComplete,这三个的意思分别就是在初始化前,初始化,和界面完全渲染完毕
那么如果你在界面完全渲染完毕的时候addCallback,才能保证有效。
现在我来解释为什么之前我用的return window[movieName+”_ob”]和return document[movieName+”_em”],在IE下,如果object标签和embed表现用同样的id,通过js去访问flash对象的时候,IE会认不出,FF是没有问题的,至于为什么我不知道,所以,我当初在搜狐做视频播放器的时候采用这样的方式
<object id=”player_ob” name=”player” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0” width=”100%” height=”100%” align=”middle”>
<param name=”allowScriptAccess” value=”always” />
<param name=”movie” value=”Main.swf” />
<param name=”quality” value=”high” />
<param name=”allowFullScreen” value=”true” />
<embed id=”player_em” name=”player” src=”Main.swf” mce_src=”Main.swf” quality=”high” bgcolor=”#000000″ width=”100%” height=”100%” align=”middle” allowScriptAccess=”always” allowFullScreen=”true” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
然后你就知道我前面为什么那么写了,所以,劝解大家一句,尽量不要用那个swfObejct.js这个东西,as和js交互起来很麻烦。你可以自己写一个简单的insertFlash.js
function insertFlash(elm, url, w, h) {
if (!document.getElementById(elm)) return;
var str = ”;
str += ‘<object width=”‘+ w +’” height=”‘+ h +’” id=”demo” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0″>’;
str += ‘<param name=”movie” value=”‘+ url +’”>’;
str += ‘<param name=”quality” value=”high”>’;
str += ‘<param name=”wmode” value=”Transparent”>’;
str += ‘<param name=”allowscriptaccess” value=”always”>’;
str += ‘<embed width=”‘+ w +’” height=”‘+ h +’” src=”‘+ url +’” quality=”autohigh” wmode=”opaque” type=”application/x-shockwave-flash” plugspace=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash“></embed>’;
str += ‘</object>’;
document.getElementById(elm).innerHTML = str;
}
至于版本的判断和版本的升级,大家去Adobe官方网站去下检测包吧。我就不多废话了,不过上次我用了半天,检测版本号一直不对,检测是否安装倒是可以
好了,先就写这些了,希望对同学们有所帮助
firefox下js与flash通讯的可恶
2009年3月7日 | 分类: flash, js | 标签: embed, flash, js, object 发表评论 | Trackback
最近开发遇到的问题更偏向于js了。写了一个程序,让js与flash通讯,结果flash能调用js方法,但是js竟然不能调用flash方法。比如说我在flash中开放了接口“abcd”,但是用js调用 swf.abcd()。竟然报错说abcd不是方法。
这个问题是只出现在firefox下,ie下运行正常。于是开始狂使用alert了——后来发现firebug可以断点调试,长叹!
发现在firefox下通过document.getElmentById(swfid)能找到一个EmbedObject,可是就是找不到abcd方法。那估计就是在开放接口的时候出现问题了。首先想到的是可能会延迟:有可能在flash object初始化完毕前就执行了ExternalInterface.addCallback。这样自然就找不到方法了。于是使用了个定时器,在2秒后开放接口——2秒的时间估计够页面初始化Flash ObjectN个了吧!
发现还是不行,还是找不到abcd方法。倒~~~~~~ 然后去网上搜,搜到js获取flashobject方法总汇——其实总汇通总会,通过这个方法总会获取到flashobject的!如下:
window.document[movieName] // (on Mozilla browsers such as Netscape)
window[movieName] // (on Internet Explorer as of ver 5)
document.embeds[movieName] // Mozilla Netscape, Firefox or Opera
===================================================
function getFlashMovieObject(movieName){
if (window.document[movieName]){
return window.document[movieName];
}else if (navigator.appName.indexOf(”Microsoft Internet”)==-1){
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}else{
return document.getElementById(movieName);
}
}
===================================================
很高兴啊,赶紧copy!运行~~~~~~~ 靠,竟然还是能找到swf对象,但是找不到abcd方法。吃个饭,细想:估计还是开放接口错了。继续找资料,找到一篇好文章:http://www.akooc.com/article.asp?id=171。竟然也是搜狗的人,还开发过搜狗音乐盒,好!找到一段话:
如果object标签和embed表现用同样的id,通过js去访问flash对象的时候,IE会认不出,FF是没有问题的,至于为什么我不知道,所以,我当初在搜狐做视频播放器的时候采用这样的方式…………………………….所以,劝解大家一句,尽量不要用那个swfObejct.js这个东西,as和js交互起来很麻烦。你可以自己写一个简单的insertFlash.js…………..
晕,估计就是查找flash对象时对错号了。我也太相信swfobject.js了。动手自己写标签,将object和embed的id区分开来:
//===============================================
//添加pagekit
//===============================================
var url = “PageKit.swf”;
//添加flash变量
var vars = “pagekitInitData=”;
if(this["pagekitInitData"] != undefined) {
vars += this["pagekitInitData"];
}
var ieID = isIE ? pagekitID : pagekitID + “_ie”;
var ffID = isIE ? pagekitID + “_ff” : pagekitID;
var str = “”;
str += ‘<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ style=”position:absolute”‘;
//str += ‘ id=”‘ + ieID +’” width=”200″ height=”200″‘;
str += ‘ id=”‘ + ieID +’” width=”200″ height=”200″‘;
str += ‘ codebase=”http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab”>’;
str += ‘ <param name=”movie” value=”‘ + url +’” />’;
str += ‘ <param name=”quality” value=”high” />’;
str += ‘ <param name=”wmode” value=”transparent”/>’;
str += ‘ <param name=”allowScriptAccess” value=”always” />’;
str += ‘ <param name=”FlashVars” value=”‘ + vars + ‘” />’;
str += ‘ <embed src=”‘ + url +’” quality=”high”‘;
str += ‘ width=”200″ height=”200″ id=”‘ + ffID +’” align=”middle”‘;
str += ‘ play=”true”‘;
str += ‘ loop=”false”‘;
str += ‘ quality=”high”‘;
str += ‘ wmode=”transparent”‘;
str += ‘ FlashVars=”‘ + vars + ‘”‘;
str += ‘ allowScriptAccess=”always”‘;
str += ‘ type=”application/x-shockwave-flash”‘;
str += ‘ pluginspage=”http://www.adobe.com/go/getflashplayer”>’;
str += ‘ </embed>’;
str += ‘</object>’;
swfDiv.innerHTML = str;
运行!还真对得起这位高人的这篇文章,找到abcd方法了!!艰辛啊~~~~~~