使用 SWFObject 來做 Flash 的漸進增強

原文連結

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

SWFObject 是用無侵入的腳本方式(unobtrusive JavaScript)將 Flash Player 安插到原本的 HTML 內容裡面，通常看到相關的文章都是講到 SWFObject 比起直接在 HTML 內安插

view plaincopy to clipboardprint?

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

  
  Thank you very much!

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

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

view plaincopy to clipboardprint?

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

  
  Thank you very much!

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

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