標准參考
OBJECT 元素定義了一個嵌入的對象。其引入的初衷是取代 IMG 和 APPLET 元素。不過由於安全等各方面原因以及缺乏瀏覽器支持,這一初衷並未實現。瀏覽器的對象支持依賴於對象類型。然而,即便是相同的對象類型,各主流瀏覽器也都 使用了不同的代碼來加載。 classid 屬性用於指定對象實現的 URI 地址。它可能用來替代或者配合 data 屬性,這由引入的對象決定。
codebase 屬性指定了一個為 classid、data、archive 屬性的相對 URI 提供基本路徑。缺省情況下,這個值為當前文檔的基本 URI。
type 屬性定義被定義在 data 屬性中指定的文件中出現的數據的 MIME 類型。
關於 OBJECT 元素及其屬性的詳細信息,請參考 HTML4.01 規范 13.3 Generic inclusion: the OBJECT element 中的內容。
問題描述
通常情況下,IE 系列瀏覽器通過 ActiveX 插件使用 OBJECT 元素引入 Flash,而其他瀏覽器則是通過相應的 NPAPI 插件使用 EMBED 元素。這造成了各瀏覽器中插入 Flash 的方式的差異。
造成的影響
若僅僅使用 OBJECT 元素設置了 classid 屬性引入 Flash,則可能造成在某些瀏覽器中 Flash 無法被引入。而若嵌套的 OBJECT 和 EMBED 元素參數不統一,也可能造成引入的 Flash 在各瀏覽器中出現差異。
受影響的瀏覽器
所有瀏覽器 |
---|
問題分析
對於 HTML4.01 規范中的 OBJECT 元素,IE 對 classid 屬性有自己的解釋方式:類標識符(class identifier)。格式形如:clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX。由 ActiveX 組件注冊在 Windows 的系統注冊表中。
codebase 屬性則為該類標識符所對應的 ActiveX 插件的 URI 地址。一般是一個 .cab 安裝包。(更多請參考 MSDN:CLASSID Attribute | classid Property 及 Class Identifier 中的內容。)
EMBED 元素則是由 NetScape Navigator 2 引入,用於在 HTML 文檔中插入符合網景插件應用程序編程接口(NPAPI)規范的插件。NPAPI 插件是跨平台的,並可以在所有實現了此接口規范的瀏覽器中使用。目前的主流瀏覽器中 IE 系列以外的瀏覽器均支持 NPAPI 插件。
事實上 IE3.0 就支持 NPAPI,但是在 IE5.5 SP2 后微軟出於安全考慮停止了對 NPAPI 的支持,轉而推薦用戶使用其 ActiveX 技術作為替代。(更多請參考 MSDN:Netscape 式的插件在升級 Internet Explorer 后不工作)
EMBED 元素擁有一個名為 pluginspage 的屬性,其值為 NPAPI 插件的 URL,與 IE 中 OBJECT 元素的 codebase 屬性類似,它告訴了瀏覽器插件的下載地址。
EMBED 元素不屬於 HTML4.01 規范中的元素,HTML 文檔中直接使用 EMBED 元素可能無法通過 W3C 校驗。不過 EMBED 元素目前已經被添加到 HTML5 草案中。(參加 HTML5 草案:4.8.3 The embed element)
至此若需要在 HTML 文檔中引入一個已安裝的通用的插件,如 Flash,則在 IE 中使用 OBJECT 元素,非 IE 中則使用 EMBED 元素。此外 IE 中也支持 EMBED 元素引入設置了正確 MIME 的插件。
通常,我們會使用類似如下結構的代碼引入 Flash:flash.html(SWF 文件來自 Adobe 網站的 Flash 范例)
<object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="src" value="clock.swf" /> <param name="quality" value="high" /> <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object>
各瀏覽器中的效果均為:
將 EMBED 元素嵌套在 OBJECT 元素中,在 IE 中會優先使用 OBJECT 元素而忽略 EMBED 元素,在其他瀏覽器中則優先使用 EMBED 元素而忽略 OBJECT 元素。這樣做雖然可以保證在所有瀏覽器中均能正確加載 Flash,但若 OBJECT 元素與 EMBED 元素的參數設定不統一,則很有可能造成 Flash 在各瀏覽器中顯示效果不一致,甚至是無法正常加載。
關於如何正確地在 HTML 文檔中引入 Flash,請參考 Adobe 官方知識庫文檔:OBJECT and EMBED syntax | Flash 與 Flash OBJECT and EMBED tag attributes中的內容。
下面將分析僅使用一種元素的引入 Flash 的情況下在所有主流瀏覽器中是否達到一致的效果。(假設瀏覽器均已正確安裝 Flash 所需插件)
1. 使用 OBJECT 元素 classid 屬性以及 PARAM 元素:flash_object_classid.html
<div style="border:5px solid black; padding:5px; float:left;"> <object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="src" value="clock.swf" /> <param name="quality" value="high" /> </object> </div>
這段代碼在各瀏覽器中運行效果如下:
IE6 IE7 IE8 Chrome Safari | Firefox Opera |
---|---|
![]() |
![]() |
Firefox 和 Opera 由於不支持 ActiveX 技術所有無法通過 OBJECT 元素及 classid 屬性引入 Flash,則此時 OBJECT 元素寬度和高度均為 0。
然 而 Chrome 和 Safari 卻正確的加載了 Flash 文件,這是由於 WebKit 內核對 ActiveX 提供了有限的支持,對於比較通用的 ActiveX 插件(如 Flash, Media Player, Director, QuickTime, RealAudio),瀏覽器會將它們的在 Windows 系統中的 classid 與其對應的 Mime-Type 相關聯,所以可以和 IE 一樣僅僅通過 OBJECT 元素的 classid 屬性引入這些插件。
2. 使用 OBJECT 元素 type、data 屬性:flash_object_type.html
<div style="border:5px solid black; padding:5px; float:left;"> <object width="200" height="200" type="application/x-shockwave-flash" data="clock.swf"> </object> </div>
這段代碼在各瀏覽器中運行效果如下:
IE6 IE7 IE8 | Firefox Chrome Safari Opera |
---|---|
![]() |
![]() |
IE 對 OBJECT 元素的 data 屬性設置 Flash 文件 URL 無任何效果。這種方式可以用於非 IE 瀏覽器。
3. 使用 OBJECT 元素 type、data 屬性以及 PARAM 元素:flash_object_all.html
<div style="border:5px solid black; padding:5px; float:left;"> <object width="200" height="200" type="application/x-shockwave-flash" data="clock.swf"> <param name="src" value="clock.swf" /> <param name="quality" value="high" /> </object> </div>
這種方式仍然僅使用 W3C 規范中標准的 OBJECT 元素,結合了上兩個測試樣例,使得所有瀏覽器均可以正常的載入 Flash 文件。
4. 使用 EMBED 元素:flash_embed.html
<div style="border:5px solid black; padding:5px; float:left;"> <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </div>
直接使用 EMBED 元素,所有瀏覽器均支持。
解決方案
- 若不考慮 W3C 校驗,可統一使用 EMBED 元素嵌入 Flash,這樣可以避免因參數不統一導致的兼容性問題。
- 若需要考慮 W3C 校驗(
Markup Validation Service),則可使用第三種單獨使用 OBJECT 與 PARAM 元素的方式。
- 若必須使用 OBJECT 嵌套 EMBED 元素這種混合方式,則要保證 Flash 文件 URL、為 Flash 傳遞的參數、寬度、高度、wmode 等參數保持統一。
- 可以使用開源的 SWFObject 引入 Flash。(請參見:
)