2018/9 更新:

電腦的 Google Chrome 更新到版本 69 之後,Flash 更是被擋得死透了,每次關掉瀏覽器之後再重新打開,同一個網頁還要再重新按一次允許 Flash。

如果像我一樣有玩 facebook 的開心水族箱 flash 遊戲的朋友, 請在瀏覽器網址列輸入
chrome://flags/#enable-ephemeral-flash-permission
然後設為 Disabled,再重新啟動瀏覽器,這樣瀏覽器就會像以前一樣記住每個網站的 flash 允許設定了,不用每次要玩就要重新按一次允許。

如果您也是 web 勞工,請記住 Flash Player 在 2020 年之後停止更新 這個原則,各瀏覽器的封殺措施只會更多。 

最近有在上網的人都有注意到 漢堡王 的極簡官網事件吧,這個新聞我真的是笑不出來,雖然我 Flash 功力不高,產出的業障不夠多,但是近期常常接到公司客戶反映說「網站壞掉了」「網站看不到」。因為 2017 年是一個各大瀏覽器宣布會預設封鎖 Flash 的年代(除了 IE 沒有這個政策)

遇到 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

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

甚至網頁的 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 的網站,還是請客戶換瀏覽器,並且另外再做一個便宜的簡易的行動版網頁?
老師:請他換瀏覽器,並且另外再做一個便宜簡易的行動版網頁啊!
大雄:你根本不懂網頁設計!
老師:你根本不懂台灣中小企業!