使用SWFObject完美解決HTML插入Flash的各瀏覽器兼容性方案

下面我們來共同學習一下

一、傳統(tǒng)的方法

代碼如下:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="<a width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="<a />
</object>

這方法是使用 object 和 embed 標簽來嵌入，細心的會發(fā)現(xiàn)，object 的很多參數和 embed 里面的很多屬性是重復的，為什么這樣做？為了瀏覽器兼容性，有的瀏覽器支持 object，有的支持 embed，這也是為什么要修改 Flash 的參數時兩個地方都要改的原因。

這種方法是 Macromedia 一直以來的官方方法，最大限度的保證了 Flash 的功能，沒有兼容性問題。但是它現(xiàn)在不那么好用了： 無法通過驗證，由于為了兼容性而嵌入的 embed 標簽是不符合 W3C 的規(guī)范的。當然，如果你不在乎什么規(guī)范不規(guī)范，另當別論。

微軟由于種種原因，在 sp2 后限制了 IE 的 ActiveX 的使用模式，就是在頁面中的 ActiveX 有一個虛框，需要用戶點擊一次才能正常交互。Flash是作為一個 ActiveX 嵌入到網頁中的，所以它也會受牽連，只有通過 JS 嵌入 Flash 才能解決這個問題。

沒有 Flash 版本檢測，如果版本瀏覽器的flash插件版本不夠，或者不能正常顯示你的 swf 文件，或者會彈出一個 ActiveX 的確認安裝的框——這個框對很多用戶來說是很恐怖的。

二、用JS嵌入的方法

用JS嵌入就是各有各的嵌入方法了，有嵌得好的有嵌得不好的。有人用 document.write 直接寫，這法子說實話不大好，感覺 hack 成分多了，有點為了驗證而驗證的意思，而且沒有體現(xiàn)出什么 JS 的優(yōu)勢。我覺得一個好的 JS 嵌入腳本，在保證 Flash 應有功能的基礎上，要發(fā)揮 JS 的優(yōu)勢應該要有版本檢測，要能很好解決可訪問性問題（也就是用戶在無法瀏覽 Flash 內容或禁用 JS 的時候應該如何處理的問題），要易于重復使用。

我們這里要講的是SWFObject這個解決方案：

“SWFObject”是利用Javascript 插入flash，好處多多，代碼簡潔，不會出現(xiàn)IE6下的“單擊此處以激活控件”的提示，并且能通過W3C驗證。不同于傳統(tǒng)的“object”插入flash的方法。

SWFObject在新的2.x版本中，其最簡單的調用竟只需一句話，并且不需要等待頁面加載完成，這意味著你可以將這句話寫在頁面的任何地方。比以前的版本，要簡便多了。下面來看幾個簡單常用的調用方法：

1、最簡單，最基本，只要想插入flash都能用到的經典一句話。

代碼如下:
<div id="swfid"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "swfid", "300", "120", "9.0.0", "expressInstall.swf");
</script>

注解：調用方法embedSWF——插入SWF文件，參數依次是@swf文件的地址；@用于裝入swf文件的容器(如div)的id；@flash的寬度；@flash的高度（當然，這里的寬高都可以使用諸如100%這樣的百分比來表示）；@正常播放該flash所需的最低版本；@當版本低于要求時，執(zhí)行該swf文件，這里利用這個flash跳轉到官方下載最新版本的flash插件。（該參數可以省略）在同一個頁面插入多個flash到不同位置時，只要重復上面的語句，使用不同的容器id就可以了。

2、給swf文件傳遞參數、變量、屬性的調用方法

代碼如下:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
//1、使用Json初始化變量、參數、屬性
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "dynamicContent2",
name: "dynamicContent2"
};
swfobject.embedSWF("test6_flashvars.swf", "content2", "300", "120", "6.0.0","expressInstall.swf", flashvars, params, attributes); </p> <p>//2、傳統(tǒng)的初始化設置，效果一樣
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "dynamicContent3";
attributes.name = "dynamicContent3";
swfobject.embedSWF("test6_flashvars.swf", "content3", "300", "120", "6.0.0","expressInstall.swf", flashvars, params, attributes);
//3、直接寫在后面，就一句話，簡潔剽悍，不拖泥帶水
swfobject.embedSWF("test6_flashvars.swf", "content5", "300", "120", "6.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"dynamicContent5",name:"dynamicContent5"});
</script>

SWFObject 2.0 官方文檔(中文) https://www.gxlcms.com/books/175630.html

github: https://github.com/swfobject/swfobject.

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com