TShopping

 找回密碼
 註冊
搜索
查看: 809|回復: 4

[教學] 使用 SWFObject 來做 Flash 的漸進增強

[複製鏈接]
發表於 2012-4-2 00:10:50 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
最近 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 內原本預設的內容,這樣的設計是不是比較完善一點呢? 多替那些未知的訪客們著想,他們就會多感謝你一點~~

 

臉書網友討論
發表於 2013-11-14 00:43:30 | 顯示全部樓層
哈哈,頂你了哦.  

版主招募中

發表於 2013-11-14 00:43:30 | 顯示全部樓層
回帖是種美德.  


發表於 2013-11-14 00:43:30 | 顯示全部樓層
ding   支持  


發表於 2014-8-27 15:58:40 | 顯示全部樓層



   浮云啊  不是浮云吧。。


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-8 06:42 , Processed in 0.058950 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表