使用 SWFObject 來做 Flash 的漸進增強

woff

最近 Google AJAX Libraries API 加上了好用的 SWFObject 這支 js (詳見這裡)，興起了我寫個簡易教學的念頭。

SWFObject 是用無侵入的腳本方式(unobtrusive JavaScript)將 Flash Player 安插到原本的 HTML 內容裡面，通常看到相關的文章都是講到 SWFObject 比起直接在 HTML 內安插 <object> 的方式還簡潔，或者是比 Adobe 官方釋出的 AC_RunActiveContent.js 還好用等等的。但是在網頁前端開發的工作中，SWFObject 更是拿來做 SEO 以及 Flash 漸進增強(progressive enhancement)的好用工具。

直接來看個範例吧，假設在網頁上的某一處設計要播放 Flash 的內容，可以先以一個 div 元素加上內容的描述如下：

1. <div id="flashContent">
   
2.   <img src="thanksalot.jpg" alt="Thanks a lot!" />
   
3.   <p>Thank you very much!</p>
   
4. </div>
   

複製代碼

這是一段表示感謝的內容，以標準 HTML 標記呈現，沒有 CSS、沒有 JavaScript，相信任何的訪客都可以正常瀏覽或讀取到，即使是搜尋引擎的機器人也可以精確地收錄網頁內容。

透過 SWFObject 可以進一步地把 id="flashContent" 的內容轉換為 Flash，這就是 Flash 的漸進增強，讓可以執行 JavaScript 並且有安裝 Flash Player 的訪客可以看到更多彩多姿的 Flash 內容。使用方式如下：

1. <div id="flashContent">   <img src="thanksalot.jpg" alt="Thanks a lot!" />   <p>Thank you very much!</p> </div> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("http://h.vctu.com/1000000.swf", "flashContent", "300", "200", "7.0.0"); </script>

複製代碼

首先在第 5 行的地方引用了 swfobject.js，接著在第 7 行的地方使用 swfobject.embedSWF()，帶入的第 1 個參數是 Flash 檔案的位置，第 2 個參數是要把 Flash 放到哪個 containter 內，接著是寬、高，以及要偵測的 Flash 版本，若 Client 端有這個版本已上的 Flash Player，才會用 Flash 取代原本的 HTML 內容。

試想，若網站的訪客或搜尋引擎的機器人無法執行 JavaScript 或無法瀏覽網站的 Flash 內容，則仍可看到 HTML 內原本預設的內容，這樣的設計是不是比較完善一點呢? 多替那些未知的訪客們著想，他們就會多感謝你一點～～

雁迪纽桐

哈哈,頂你了哦.  

qoocoo123

回帖是種美德.  

ak4706

ding   支持  

淘一热的

   浮云啊  不是浮云吧。。