IE、火狐、谷歌對於Embed和Object的兼容問題

首先IE只支持對Object的解析。

火狐,谷歌,Safari只支持對Embed的解析。

一、傳統的方法

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,0,0" 
   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="http://www.macromedia.com/go/getflashplayer" />
</object>
這方法是使用 object 和 embed 標籤來嵌入,細心的會發現,object 的很多參數和 embed 裏面的很多屬性是重複的,爲什麼這樣做?爲了瀏覽器兼容性,有的瀏覽器支持 object,有的支持 embed,這也是爲什麼要修改 Flash 的參數時兩個地方都要改的原因。這種方法是 Macromedia 一直以來的官方方法,最大限度的保證了 Flash 的功能,沒有兼容性問題。但是它現在不那麼好用了:

無法通過驗證,由於爲了兼容性而嵌入的 embed 標籤是不符合 W3C 的規範的。當然,如果你不在乎什麼規範不規範,另當別論。

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

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

二、只用 object 的方法
這種方法的名字叫做 Flash satay,最早是2002年由 Drew McLellan 發表在 A List Apart 上,後來又經過了幾次完善:

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>
這方法沒 embed 了,可以通過驗證,是標準的嵌入 Flash 的方法,瀏覽器兼容性也不錯,看起來幾乎完美,不過還是有問題的:

需要一個 holder swf 來加載你的目標 swf 以保證 IE 中的 stream 能力,如果你需要通過 flashvars 來傳參,或者和頁面的 JS 交互,會很麻煩。

同上面第二點,ActiveX的虛框問題。

繼續同上沒有版本檢測

還是有少數用戶代理(比如一些版本的 safari 和一些屏幕閱讀器)不認這種方式,有 bug。

三、用JS嵌入的方法

用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接寫,這法子說實話不大好,感覺 hack 成分多了,有點爲了驗證而驗證的意思,而且沒有體現出什麼 JS 的優勢。我覺得一個好的 JS 嵌入腳本,在保證 Flash 應有功能的基礎上,?⒒?JS 的優勢應該要有版本檢測,要能很好解決可訪問性問題(也就是用戶在無法瀏覽 Flash 內容或禁用 JS 的時候應該如何處理的問題),要易於重複使用。
我知道的比較常見的 JS 嵌入方法有以下幾個

SWFObject

UFO - Unobtrusive Flash Objects

Macomedia(現在是Adobe了..)提供的腳本[這裏]和[這裏]。

我 SWFObject 用的比較多,就挑它來說一些這種方法的優點:

IE中沒有討厭的虛框問題了。

提供了完善的版本檢測功能,如果版本不夠則顯示其他東西,比如圖片或文字。

易於使用,只要在頁面頭加載一個 .js 文件,然後 HTML 寫一個容器,裏面放普通的文本或圖片(用於無法顯示 Flash 時顯示),最後用腳本來替換這個元素裏面的內容爲 Flash。

可以通過驗證——當然這個不是重點,只是順帶效果罷了。

四、我的結論

現階段用 JS 嵌入 Flash 是最完美的方法,雖然這法子這也是由於瀏覽器的種種問題而作出的妥協。
但它在保證 Flash 功能的前提下還利用 JS 提供了額外的好處,再者又已經有人寫了很完善的嵌入腳本可以方面地下載使用(推薦 SWFObject),我們還有什麼理由不用它呢?

SWFObject 那網頁是英文的,這裏寫個簡單的用法教程:

下載它的.js文件,在這裏: http://blog.deconcept.com/swfobject/swfobject1-4.zip (如果鏈接失效可能是版本有更新,請用上面給出的地址去主頁下載最新版本)

在你的 HTML 頁面頭部<head>區嵌入這個腳本文件:<script type="text/javascript" src="swfobject.js"></script>

在你的 HTML 中寫一個用來放 Flash 的容器,比如<div>,並隨便給一個 id 比如 flashcontent。然後在裏面放上你的替換內容。

<div id="flashcontent">
這裏放替換內容,用來在 Flash 無法顯示時顯示。
</div>
使用腳本替換這個內容:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
//參數意思: 地址,Flash 的 id(不是容器的 id),寬,高,版本需求,背景顏色
//這是最基本的,如果你要高級的設置,就仔細翻翻說明吧。
   so.write("flashcontent");
</script>
這腳本可以寫在 HTML 中也可以寫在外部 .js 文件中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章