关于Flash广告的调用

swfobject应该是目前比较常用的js库了, 但在网站运营的过程中, 却发现一些改版的xp系统不知怎么集成的一些低版本flash, 在ie下竟然会使swfobject判断flash版本的方法失效. 于是翻出源代码找到出了这段代码

if (typeof win.ActiveXObject != UNDEF) {
 2 try {
 3 var a =new ActiveXObject(SHOCKWAVE_FLASH_AX);
 4 if (a) { // a will return null when ActiveX is disabled
 5              d = a.GetVariable("$version");
 6 if (d) {
 7                 ie =true; // cascaded feature detection for Internet Explorer
 8                  d = d.split("")[1].split(",");
 9                 playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
10             }
11         }
12     }
13 catch(e) {}
14 }

最后定位到var a = new ActiveXObject(SHOCKWAVE_FLASH_AX);这里SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash", 经过测试发现确实得不到对象, 但如果改成"ShockwaveFlash.ShockwaveFlash.Ver"却可以获取到对象, 于是把这段代码小改一下, 问题解决

if (typeof win.ActiveXObject != UNDEF) {
 2 for(var i =10; i >0; --i) {
 3 try {
 4 var a = SHOCKWAVE_FLASH_AX;
 5 if(i <10) {
 6                 a = SHOCKWAVE_FLASH_AX +"."+ i;
 7             }
 8             a =new ActiveXObject(a);
 9 if (a) { // a will return null when ActiveX is disabled
10                  d = a.GetVariable("$version");
11 if (d) {
12                     ie =true; // cascaded feature detection for Internet Explorer
13                      d = d.split("")[1].split(",");
14                     playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
15                 }
16             }
17 break;
18         }
19 catch(e) {}
20     }
21 }

这样低于10的版本则使用"ShockwaveFlash.ShockwaveFlash.Ver ", 更高的版本则使用"ShockwaveFlash.ShockwaveFlash", 而且只要代码执行成功一次就break;避免频繁耗时的new ActiveXObject操作.

下面再来讲讲如何更方便地使用swfobject, 以便让我们不用关心页面上究竟有多少个flash,它们都在什么地方, 用户不支持flash怎么办等等问题.

首先我们定义flash的公用样式和html结构

.swf-container{ overflow:hidden; margin:0 auto; position:relative;}
2.swf-container *{ width:100%; height:100%; overflow:hidden; display:block;}
3.swf-container dt{ position:absolute; top:0; left:0; background:url(about:blank); z-index:1;}
4.swf-container dd{ position:absolute; top:0; left:0;}

<dl class="swf-container">
2<dt title="simple.jpg"><a href="javascript:;"></a></dt>
3<dd title="simple.swf"></dd>
4</dl>

页面上所有的flash都要使用这个样式和结构, flash容器dl标签的宽高可以由其他私有样式定义或者内联, dt标签的title放代替图片的链接, 方便在用户不支持flash的时候使用,dd标签的title则放flash的链接, 以便dom加载完成的时候动态注入flash, 防止一些大的flash下载过程中把页面卡住, a标签可以放广告链接, z-index:1;保证dt标签永远定位在flash之上, 用户鼠标划过时只接触到a标签, 提升用户体验, 而且方便程序更换广告链接.

(function(){
 2var load=function(container,id){
 3var dt=container.getElementsByTagName("dt")[0];
 4var dd=container.getElementsByTagName("dd")[0];
 5if(swfobject.getFlashPlayerVersion().major>0){
 6var object=document.createElement("object");
 7            dd.appendChild(object);
 8            object.id=id;
 9            swfobject.embedSWF(dd.title,id,container.clientWidth,container.clientHeight,"6.0.0","expressInstall.swf",{},{"wmode":"transparent"},{});
10        }
11else{
12var image=document.createElement("img");
13            dt.appendChild(image);
14            image.src=dt.title;
15        }
16        dt.getElementsByTagName("a")[0].onfocus=function(){this.blur();};
17        dt.removeAttribute("title");
18        dd.removeAttribute("title");
19    };
20    swfobject.addDomLoadEvent(function(){
21var elems=document.getElementsByTagName("dl");
22var index=0;
23for(var i=0;i<elems.length;i++){
24if(elems[i].className.indexOf("swf-container")>-1){
25                load(elems[i],["#swf_",index].join(""));
26                index++;
27            }
28        }
29    });
30})();

最后把这段脚本嵌到swfobject后面, 当dom加载完成的时候找出所有包含swf-container样式的dl标签, 当用户支持flash的时候我们就加载flash, 否则就用图片代替, 设置"wmode":"transparent" 避免flash把高z-index级别标签遮住. 这样在添加更多flash的时候, 我们就不用关心脚本, 只需要使用相同的样式和结构就可以了.