翻譯：SWFObject 2.0官方文檔

SWFObject是一種易用的、符合标準的在網頁中嵌入flash對象的方法，你隻需要在網頁中引用一個小巧的js檔案。相信很多人都使用過SWFObject 1.5或者UFO來動态的嵌入flash對象，那麼SWFObject 2.0和SWFObject 1.5以及UFO有什麼關系呢？SWFObject 2.0又有什麼新的特性和優勢呢？這篇SWFObject 2.0官方文檔中文版将會告訴你答案。

原文：http://code.google.com/p/swfobject/wiki/SWFObject_2_0_documentation

主要内容：

SWFObject 2.0與SWFObject 1.5和SWFFix有什麼關系？

為什麼你應該使用SWFObject？

怎樣使用SWFObject？

怎樣用符合标準的标簽嵌入Flash内容并且用SWFFix來解決出現的問題（第一種嵌入方法）

怎樣在一個HTML頁面中嵌入多個SWF檔案？（采用第一種嵌入方法）

怎樣在JavaScript中引用活動的object元素？（采用第一種嵌入方法）

怎樣使用SWFObject動态的嵌入Flash内容？（第二種嵌入方法）

怎樣在一個HTML頁面中嵌入多個SWF檔案？（采用第二種嵌入方法）

怎樣使用SWFObject的JavaScript類庫獲得Flash Player的相關資訊？

SWFObject v2.0與其他一些相似的類庫，例如SWFObject v1.5和UFO，相比有什麼不同？

從SWFObject v1.5遷移到SWFObject v2.0的注意事項

從UFO遷移到SWFObject v2.0的注意事項

使用SWFObject會有什麼風險？

SWFObject支援MIME類型application/xhtml+xml嗎？

SWFObject v2.0是原來的項目SWFFix[ http://code.google.com/p/swffix/ ]的新名字。它是一個由Geoff Stearns、Michael Williams和Bobby van der Sluis發起的開源項目，以創造下一代用于嵌入flash内容的JavaScript類庫，并取代SWFObject v1.5 [ http://blog.deconcept.com/swfobject/ ]、the Flash player detection kit [ http://www.adobe.com/products/flashplayer/download/detection_kit/ ]和UFO [ http://www.bobbyvandersluis.com/ufo/ ]為目标。

一篇A List Apart上的文章Flash Embedding Cage Match描述了SWFObject v2.0背後的基本原理，以及為什麼它比其他可用的Flash嵌入方式更好。

SWFObject提供了兩種嵌入Flash内容的方法：

用符合标準的标簽來嵌入Flash内容和替換内容（譯者注：替換内容指Flash插件沒有安裝時需要顯示的内容），并且用JavaScript來解決使用标簽嵌入時出現的一些問題（這種方法也被稱之為靜态發表（static publishing））。

使用标準的标簽插入替換内容，并用unobtrusive（譯者注：這個詞的翻譯争議比較大，暫且不譯，可以了解為低調的、不唐突的）的JavaScript來嵌入Flash内容（與以前版本的SWFObject以及UFO很相似，這種方法也被稱之為動态發表（dynamic publishing））。

與第二種方法相比，第一種方法的優勢在于：

更能實際的控制對符合标準标簽的創作。（The actual authoring of standards compliant markup is promoted.）

插入Flash内容的機制不再依賴于JavaScript，是以這種方法适當的“降級”了。

如果你安裝了Flash插件，但是JavaScript被禁用了或者浏覽器并不支援JavaScript，你仍然能夠看到你的Flash内容。

Flash将能夠在那些對JavaScript支援較弱的裝置上運作，例如Sony PSP。

像RSS閱讀器這樣的自動化的工具能夠讀取Flash内容。

與第一種方法相比，第二種方法的優勢在于：

更容易被編寫和維護，因為它顯得更簡潔，沒有包含多餘的代碼。

避免了通過“點選激活”的機制來激活Internet Explorer 6+和Opera 9+中的Flash内容。

SWFObject的基本标簽使用了嵌套object标簽的方法（帶有專用于Internet Explorer的條件注釋）[ http://www.alistapart.com/articles/flashembedcagematch/ ]來保證僅通過标簽實作最優化的跨浏覽器支援，同時使其符合标準，并且支援替換内容[ http://www.swffix.org/testsuite/ ]：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>SWFObject v2.0 - step 1</title>

</head>

<body>

<div>

<p>Alternative content</p>

</object>

</div>

</body>

</html>

注意：嵌套object标簽的方法要求兩次定義object标簽（外層的object為Internet Explorer定義，内層的object為其他浏覽器定義），是以你也需要兩次定義你的object屬性（attributes）和嵌套的param元素。

必須的屬性（attributes）：

classid（隻需為外層object元素定義，值總是等于“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”）

type（隻需為内層object元素定義，值總是等于“application/x-shockwave-flash”）

data（隻需為内層object元素定義，指定SWF檔案的URL）

width（内外層object都需要定義，指定這個SWF的寬）

width（内外層object都需要定義，指定這個SWF的高）

必須的param元素：

movie（隻需為外層object元素定義，指定SWF檔案的URL）

注意：我們建議不使用codebase屬性（attributes）來指向Adobe伺服器上的Flash插件安裝位址，因為它違背了隻将通路限制在目前文檔域的規範。我們推薦使用帶有精巧提示資訊的替換内容，這樣使用者将獲得更好的Flash插件下載下傳體驗。

怎樣使用HTML來配置你的Flash内容？

你可以為你的object元素添加下面這些常用的可選屬性（attributes）[ http://www.w3schools.com/tags/tag_object.asp ]：

name

class

align

你可以使用下面這些專用于Flash的可選param元素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]：

play

loop

quality

scale

salign

wmode

bgcolor

base

swliveconnect

flahvars

devicefont [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331 ]

allowscriptaccess [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 ]

seamlesstabbing [ http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html ]

allowfullscreen [ http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html ]

allownetworking [ http://livedocs.adobe.com/flash/9.0/main/00001079.html ]

為什麼你應該使用替換内容（alternative content）？

object元素允許你将替換内容嵌套在其中，如果Flash插件沒有安裝或者不被支援那麼這些替換内容就會被顯示出來。由于這些替換内容能被搜尋引擎很好的識别，這使它成為一個建立對搜尋引擎友好的網頁内容的好工具。總之，當你想建立一個能夠讓不使用插件的使用者[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ]也可以通路的網頁内容，建立一個對搜尋引擎友好[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html ]的網頁内容，或者告訴通路者他們能獲得更好的Flash插件下載下傳體驗，你就應該使用替換内容。

使用嵌套object的方法有哪些缺點？

當你仔細觀察這個标簽方法對跨浏覽器的支援時，你會發現它有下面一些不足之處：

Safari 1.2.2或者更低的版本将忽略所有的嵌套param元素。

Windows XP SP2+上的Internet Explorer 6+或者Opera 9+會包括一個“點選激活”的機制。

老版本的Flash Player有一定的風險讓你的Flash内容被錯誤的顯示或者根本不被顯示。

SWFObject的JavaScript類庫會嘗試解決這些問題。你最好将它看作一個附加的工具（add-on），它的基本目标是解決使用符合标準标簽時出現的問題，同時增加提高使用者體驗的功能。

注意：目前所有已知的用來避免靜态SWF内容的“點選激活”機制的變通方法，都存在嚴重的缺陷。動态發表（dynamic publishing，第二種嵌入方法）是目前唯一真正可用的避免激活活動内容的解決方案。

SWFObject的JavaScript類庫由一個外部JavaScript檔案（大小：10.7Kb，GZIPed：3.5Kb）組成。SWFObject會在外部JavaScript檔案被加載後立即被執行，并且對于那些支援DomLoad事件的浏覽器，例如 IE、Firefox、Safari和Opera 9+，SWFObject将會在DOM被加載後完成所有的DOM操作，而如果浏覽器不支援DomLoad事件，所有DOM操作将會在頁面的load事件被觸發後執行。

<title>SWFObject v2.0 - step 2</title>

首先為Flash内容的外層object标簽添加一個獨特的id屬性，然後添加swfobject.registerObject方法：

第一個參數（String，必須的）指定object标簽中使用的id。

第二個參數（String，必須的）指定你釋出的Flash内容對應的Flash Player版本。它将激活Flash版本監測，用來決定是顯示Flash内容還是通過一些DOM操作來顯示替換内容。表示Flash版本的數字通常由四部分組成：major.minor.release.build，但是SWFObject隻識别前3個數字，是以“WIN 9,0,18,0”（IE）或者“Shockwave Flash 9 r18”（其他浏覽器）都會被翻譯為“9.0.18”。

第三個參數（String，可選的）可以用來激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]，并指定express install SWF檔案的URL。Express install将會在所需要的Flash Player版本不可用的時候，顯示一個标準化的Flash插件下載下傳對話框，用來替代你的Flash内容。一個預設的expressInstall.swf檔案被一起打包在了項目中。項目中也包含了expressInstall.fla和其他AS源檔案（在SRC檔案夾中），你可以用它們用性設計的作建立自定義的express install體驗。

<title>SWFObject v2.0 - step 3</title>

swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");

</script>

提示：使用SWFObject 2.0 HTML和JavaScript代碼生成器（SWFObject 2.0 HTML and JavaScript generator）來幫助你建立代碼：[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_generator ]。

請重複第一步到第三步（在“怎樣用符合标準的标簽嵌入Flash内容并且用SWFFix來解決出現的問題（第一種嵌入方法）”中提到的）來添加任意多個SWF檔案到你的頁面。

一個嵌套object方法的副作用就是每個SWF檔案在HTML代碼中都有兩個object元素與之對應，但是你隻能使用一個id或者name屬性，因為他們在一個頁面中必須是獨一無二的。

下面的浏覽器可能會識别不同的活動object元素：

Windows下的Internet Explorer的隻知别外層的object元素，因為内層的object被條件注釋掉了。

Opera和Safari都支援外層的object标簽（參考：[ http://www.swffix.org/testsuite/ ]，行：object ActiveX）。

Firefox、Mozilla和其他基于Gecko的浏覽器使用内層的object。

你可以這樣引用活動的object元素：

為外層的object元素添加一個id

使用下面的代碼來引用object元素：

var obj = swfobject.getObjectById("myId");

if (obj) {

obj.doSomething(); // e.g. an external interface call

}

示例頁面：[ http://www.swffix.org/swfobject/testsuite/test_com.html ]

SWFObject的動态嵌入方法遵循漸進增強（progressive enhancement）[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ]的原則，當浏覽器對JavaScript和Flash插件有足夠支援的時候，SWFObject會用Flash内容替換HTML内容。首先定義你的替換内容，并且為它添加一個id屬性：

<title>SWFObject v2.0 dynamic embed - step 1</title>

<p>Alternative content</p>

<title>SWFObject v2.0 dynamic embed - step 2</title>

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5個必須的參數和4個可選的參數：

swfUrl（String，必須的）指定SWF的URL。

id（String，必須的）指定将會被Flash内容替換的HTML元素（包含你的替換内容）的id。

width（String，必須的）指定SWF的寬。

height（String，必須的）指定SWF的高。

version（String，必須的）指定你釋出的SWF對應的Flash Player版本（格式為：major.minor.release）。

expressInstallSwfurl（String，可選的）指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。

flashvars（String，可選的）用name:value對指定你的flashvars。

params（String，可選的）用name:value對指定你的嵌套object元素的params。

attributes（String，可選的）用name:value對指定object的屬性。

<title>SWFObject v2.0 dynamic embed - step 3</title>

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");

怎樣配置你的Flash内容？

styleclass（不使用class，因為class也是ECMA4的保留關鍵字）

怎樣用JavaScript對象來定義你的flashvars、params和attributes？

你最好用對象的字面量（Object literal notation）來定義JavaScrpt對象，例如這樣：

var flashvars = {};

var params = {};

var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

你可以在定義對象的時候添加你的name:value對（注意：請確定不要再對象中的最後一個name:value對後面加上逗号）：

var flashvars = {

name1: "hello",

name2: "world",

name3: "foobar"

};

var params = {

menu: "false"

var attributes = {

id: "myDynamicContent",

name: "myDynamicContent"

或者在對象建立之後用點号添加屬性（properties）和值：

flashvars.name1 = "hello";

flashvars.name2 = "world";

flashvars.name3 = "foobar";

params.menu = "false";

attributes.id = "myDynamicContent";

attributes.name = "myDynamicContent";

上面的代碼也可以這樣寫（為那些喜歡俏皮話的頑固腳本程式員準備的不易讀的簡寫版本（the less readable shorthand version for the die-hard scripter who love one-liners））：

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

如果你不想使用一個參數，你可以将它定義為false或者一個空對象：

var flashvars = false;

flashvars對象是一個為了增加易用性而設計的作為快捷方式的參數，是以你可以先忽略它，然後在params對象中指定你的flashvars：

menu: "false",

flashvars: "name1=hello&name2=world&name3=foobar"

請重複第一步到第三步（在“怎樣使用SWFObject動态的嵌入Flash内容？（第二種嵌入方法）”中提到的）來添加任意多個SWF檔案到你的頁面。

SWFObject包含了一個公共API，通過它你可以用JavaScript獲得Flash Player的相關資訊。

swfobject.getFlashPlayerVersion()傳回一個包含了已安裝Flash Player主要版本（major:Number）、次要版本（minor:Number）、發行版本（release:Number）的JavaScript對象：

var playerVersion = swfobject.getFlashPlayerVersion(); // returns a JavaScript object

var majorVersion = playerVersion.major; // access the major, minor and release version numbers via their respective properties

swfobject.hasFlashPlayerVersion(versionNumbersString)傳回一個Boolean值，表明特定版本的Flash插件是否已被安裝：

if (swfobject.hasFlashPlayerVersion("9.0.18")) {

// has Flash

else {

// no Flash

需要注意的是，表示Flash版本的數字通常由四部分組成：major.minor.release.build，但是SWFObject隻識别前3個數字，是以“WIN 9,0,18,0”（IE）或者“Shockwave Flash 9 r18”（其他浏覽器）都會被翻譯為“9.0.18”。

第二種嵌入方法（在“怎樣使用SWFObject？”中描述的）的工作方式跟SWFObject v1.5和UFO類似，都是用JavaScript動态的将替換内容替換為Flash内容。

第一種嵌入方法的工作原理則與上面的不同，它使用符合标準的标簽嵌入Flash内容，然後用JavaScript來解決使用标簽嵌入時出現的一些問題。這種新方法的優勢在于：

更能實際的掌握對符合标準标簽的創作。（The actual authoring of standards compliant markup is promoted.）

現在更傾向于在HTML頁面的head标簽中插入所有的腳本檔案。

現在類庫使用的是小寫：swfobject，而不是SWFObject。

現在隻能通過類庫（的類）來通路方法（譯者注：即靜态方法），而不是像從SWFObject v1.5中那樣通過SWFObject的執行個體來通路。

API跟以前完全不同了，而且更詳盡：[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]。

如果浏覽器對JavaScript和Flash有足夠的支援，SWFObject 2.0會将整個替換内容，包括被引用的HTML容器元素，替換為Flash内容，而不是像SWFObject 1.5那樣，隻把被引用容器裡面的内容替換為Flash内容。你現在可以這樣轉移你的CSS規則：為你的Flash内容定義與替換内容的容器元素相同的id（前者将替換後者，是以你的id不會重複）。

如果浏覽器對JavaScript和Flash有足夠的支援，SWFObject 2.0會将整個替換内容，包括被引用的HTML容器元素，替換為Flash内容，而不是像UFO那樣，隻把被引用容器裡面的内容替換為Flash内容。你現在可以這樣轉移你的CSS規則：為你的Flash内容定義與替換内容的容器元素相同的id（前者将替換後者，是以你的id不會重複）。

UFO的setcontainercss特性沒有被合并到SWFObject 2.0中，但是使用SWFObject 2.0的API可以很容易的實作相同的功能，請參考：[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_api_javascript_dev ]中的swfobject.createCSS(selStr, declStr)。

當選擇第一種嵌入方法時：

73%的web使用者（IE6、IE7和Opera共同占有的市場佔有率，資料來源：thecounter.com [ http://www.thecounter.com/stats/2007/September/browser.php ]）會因為“點選激活”的機制獲得一些不好的使用者體驗。

不超過1%的web使用者可能會看到錯誤的Flash内容：

當你以Flash Player 9釋出Flash内容，但使用者隻安裝了Flash Player 6，這時使用者可能會看到錯誤的内容或者看不到任何内容。出現這種情況的機率是0.4%左右（大約6%的使用者沒有安裝Flash Player 9，同時有6%的使用者禁用了JavaScript）。

當你以Flash Player 8釋出Flash内容，但使用者隻安裝了Flash Player 6，這時使用者可能會看到錯誤的内容或者看不到任何内容。出現這種情況的機率是0.04%左右（大約0.7%的使用者沒有安裝Flash Player 8，同時有6%的使用者禁用了JavaScript）。（資料來源：thecounter.com [ http://www.thecounter.com/stats/2007/September/javas.php ]和Adobe [ http://www.adobe.com/products/player_census/flashplayer/version_penetration.html ]）

需要注意的是，雖然這種嵌入方法有它的風險，但出現的幾率不會比其他可用的嵌入方法更大。

當選擇第二種嵌入方法時：

6%的web使用者禁用了JavaScript，或者使用了不支援JavaScript的浏覽器，或者使用的浏覽器對JavaScript的支援不足，這時使用者将看不到任何Flash内容（無論使用者是否已安裝了最新的Flash Player），但他們能看到相應的替換内容。（資料來源：thecounter.com [ http://www.thecounter.com/stats/2007/September/javas.php ]）

出于設計上的考慮，SWFObject不支援MIME類型。

我們不提供支援的理由有很多：

隻有很少一部分（并不重要）web開發者使用它。

我們不确定那是否今後的發展方向。Internet Explorer并不支援它，而其他主流的浏覽器将它們的目标定在了一種新的HTML解析标準（以及HTML 5），而這将偏離目前W3C所提倡的将HTML解析為XML。

考慮到節省檔案大小，以及時間、精力的限制（主要在測試和解決疑難問題方面），我們不提供對它的支援。

本文轉自 OldHawk 部落格園部落格，原文連結：http://www.cnblogs.com/taobataoma/archive/2008/04/15/1154019.html，如需轉載請自行聯系原作者

翻譯：SWFObject 2.0官方文檔

繼續閱讀

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

請求逾時VUE axios重新再次請求

今日頭條iOS用戶端啟動速度優化技術調研實測資料

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條