各瀏覽器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差異

標準參考

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 Chrome1 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 屬性引入這些插件。

【注】：Chrome 後續版本對此處實現做了修正，已無法通過 classid 來加載 Flash 文件。

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 元素，所有瀏覽器均支持。

解決方案

1. 若不考慮 W3C 校驗，可統一使用 EMBED 元素嵌入 Flash，這樣可以避免因參數不統一導致的兼容性問題。

2. 若需要考慮 W3C 校驗（ Markup Validation Service），則可使用第三種單獨使用 OBJECT 與 PARAM 元素的方式。

3. 若必須使用 OBJECT 嵌套 EMBED 元素這種混合方式，則要保證 Flash 文件 URL、爲 Flash 傳遞的參數、寬度、高度、wmode 等參數保持統一。

4. 可以使用開源的 SWFObject 引入 Flash。