最近有在上網的人都有注意到 漢堡王 的極簡官網事件吧,這個新聞我真的是笑不出來,雖然我 Flash 功力不高,產出的業障不夠多,但是近期常常接到公司客戶反映說「網站壞掉了」「網站看不到」。開心的是用 IE 的人又變少了,不開心的是又平白增加煩惱。資訊這種東西就是這樣,未來 2027 年的同事,大概也會一邊幫前人擦屁股一邊訐譙。

網頁變空白事件起因是桌上型電腦的 Google Chrome 瀏覽器,從 5x 版開始多了一個設定,網站要執行 Flash 之前,要經過使用者同意。於是沒經過同意或全域強制允許,Flash 預設是不會顯示的。
Google Chrome 瀏覽器的 Flash 全域設定

但是有一招,就是如果 Flash 區塊是用 embed 標籤嵌入的,而且有寬高,例如:

<embed width="100%" height="100%" src="index.swf" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer_tw" align="middle" play="true" loop="true" scale="noborder" wmode="transparent" devicefont="false" bgcolor="#000000" name="index" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain" salign="" type="application/x-shockwave-flash">

電腦的畫面上就可以看到「點此啟用 Flash」之類的提示文字,
點此啟用 Flash
(上面是一張圖,不要點)

允許 Flash
再按允許之後 Flash 就會顯示出來,天下太平了,勉強還算有救。

人生最厲害的就是這個 but

如果網頁上的 flash 是用 JavaScrpt 嵌入的,例如用 swfobject.js 或 AC_RunActiveContent.js 先判斷瀏覽器狀況,再把網頁上的某個 div 取代成 flash 內容的技術,在此例則會顯示一些對解決問題毫無幫助的訊息,例如以下的兩則範例截圖:
這個頁面上的內容需要較新版本的 adobe flash player
可是瑞凡,這訊息根本毫無幫助,因為問題不是 Flash player 版本沒更新 (Google Chrome 瀏覽器裡面就有內建 Flash player 會自己更新),也不是瀏覽器 JavaScript 沒開,更跟紅色咖啡圖案的那個 Java 一點關係都沒有!

甚至網頁的 Flash 內容是用這種 Dreamweaver 比較早期的,純 object 跟 param 標籤的方式嵌入的,那很容易被 Chrome 擋得屍骨無存,使用者一進網頁,幾乎什麼都看不到。

<object id="idx-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
    <param name="movie" value="preloader.swf">
    <param name="wmode" value="transparent">
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="preloader.swf" width="100%" height="100%">
        <param name="wmode" value="transparent">
        <!--<![endif]--> 

        <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="655" height="130" align="right" id="FlashID">
    <param name="movie" value="flash/index-flash01.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- 此 param 標籤會提示使用 Flash Player 6.0 r65 和更新版本的使用者下載最新版本的 Flash Player。如果您不想讓使用者看到這項提示,請將其刪除。 -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- 下一個物件標籤僅供非 IE 瀏覽器使用。因此,請使用 IECC 將其自 IE 隱藏。 -->
    <!--[if !IE]>-->
    <object data="flash/index-flash01.swf" type="application/x-shockwave-flash" width="655" height="130" align="right">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- 瀏覽器會為使用 Flash Player 6.0 和更早版本的使用者顯示下列替代內容。 -->
      <div>
        <h4>這個頁面上的內容需要較新版本的 Adobe Flash Player。</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="取得 Adobe Flash Player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>

如上則案例,本以為這種寫法,就算 Flash 被擋掉了,至少會顯示一個「這個頁面上的內容需要較新版本的 Adobe Flash Player」吧?
結果 SWFObject v2.0 自動把外容器 object tag 藏起來,瀏覽器的預設 css 樣式把 param tag 藏起來,什麼都不會顯示,讓整個網頁充滿了空氣感。
被擋光光

最後來個小品文,改編自網路常見的大雄與胖虎的笑話…

大雄:老師,你做的 Flash 網頁未來有一天打不開了,你要請客戶重新設計 HTML5+ RWD 的網站,還是請客戶換瀏覽器,並且另外再做一個簡易的行動版網頁?
老師:請他換瀏覽器,並且另外再做一個簡易的行動版網頁啊!
大雄:你根本不懂網頁設計!
老師:你根本不懂台灣中小企業!