The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

網站的 Flash 前導頁需考量的不僅僅瀏覽器是否支援

有些網站會放置 Flash 前導頁( 例如:http://www.liteonaward.com/ ),但我也看過許多網站在設計 Flash 前導頁的時候,整個網頁就只有一個 Flash 而已,所有進站的 Link 全部寫在 Flash 裡面,沒考慮到「萬一」使用者的瀏覽器不支援 Flash player 或 Flash player 所安裝的版本太舊怎麼辦!這時使用者就像是人到了你家,卻找不到門口進入一樣,連按電鈴的地方都沒有。

一般來說,許多人都會用以下方式宣告載入 Flash :

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
   width="960" height="600">
     <param name="movie" value="flash.swf" />
     <param name="quality" value="high" />
     <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="600"></embed>
   </object>

雖然已經很少人沒裝 Flash 了 ,但總是有人沒裝的人,萬一使用者沒安裝 Flash player 的話,我們可以選擇一張靜態的圖片輸出,讓使用者知道還是有「門」的。

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
   width="960" height="600">
     <param name="movie" value="flash.swf" />
     <param name="quality" value="high" />
     <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="600"></embed>
     <a href="main.htm"><img src="AlternativePic.gif" width="950" height="630" border="0" /></a>
   </object>

微軟在幾年前針對 Internet Explorer 6 與之後的版本進行了一次軟體更新,對 ActiveX 控制項 (就是用 <object> 宣告的語法的物件) 預設都是不啟用的, 請看下圖:

這張圖應該很多人看過吧,如果 Flash 當中有設定超連結,還是必須要先點選一下「啟動此控制項」之後,才能點選,如果頁面上有一堆 Flash 的話,那就麻煩了。詳細資訊可以上微軟技術支援網站查閱。

事實上針對這個問題網路上已經有很多解決方案了,今天我們介紹透過 Adobe 提供的一個 Flash Player Detection Kit 可以協助我們透過 JavaScript 解決這個無法自動啟動的問題。上網下載後可以得到一個 detectionkit.zip 壓縮檔,裡面有個 AC_OETags.js 可解壓縮出來,還有個 ClientSideDetection.html 有使用範例,直接看範例就知道怎麼用的了。

但是他提供的範例我覺得不夠好,萬一使用者電腦 JavaScript 暫時沒啟用的時候怎麼辦?這時候使用者一樣是看不到的!(別懷疑,有時後使用者會外掛一些奇奇怪怪的軟體,有時後會影響 JavaScript 運作),為了這個問題我又多做了一些調整,以下是完整的程式碼:

[code:html]

<html>
<head>
 <title>這是頁面標題</title>
 <script src="AC_OETags.js" language="javascript"></script>
</head>
<body>
<div id="indexflash">

 <noscript>
 
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
   width="960" height="600">
     <param name="movie" value="flash.swf" />
     <param name="quality" value="high" />
     <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="960" height="600"></embed>
  <img src="AlternativePic.gif" width="950" height="630" border="0" />
   </object>
  
 </noscript>

 <script type="text/javascript"><!--

  // Major version of Flash required
  var requiredMajorVersion = 8;
  // Minor version of Flash required
  var requiredMinorVersion = 0;
  // Minor version of Flash required
  var requiredRevision = 0;
  
  // 檢查版本
  var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

  // 如果符合版本要求 hasReqestedVersion 會是 true
  if (hasReqestedVersion)
  {
   AC_FL_RunContent(
    "src", "example",
    "width", "950",
    "height", "630",
    "align", "middle",
    "id", "detectionExample",
    "quality", "high",
    "bgcolor", "#FFFFFF",
    "name", "detectionExample",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
    "pluginspage", "http://www.adobe.com/go/getflashplayer");
  }
  // 如果版本不符合或使用者尚未安裝 Flash 則輸出替代圖片
  else
  {
   document.write('<img src="AlternativePic.gif" width="950" height="630" border="0" />');
  }
 //-->
 </script>
</div>
</body>
</html>

[/code]

 

相關連結