了解 embed 及 param 標籤中 wmode 屬性、並且動態修改它

此篇文章最近更新時間為2011-06-21 03:19:01 目前共有5篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

了解 wmode 的屬性

過去常碰到 Flash 廣告遮到 div 的問題,我的 101 招就是將 Flash 相關標籤中的 wmode 屬性設定為 transparent,但從來沒搞清楚有哪幾種模式、差別為何。
wmode 一共有 window、opaque、transparent 三種模式,請見以下的說明:

1. window 模式

wmode =
  • 是 wmode 的預設值,當你什麼都沒設的時候就是 window 模式囉。
  • 在此模式下無法設定 CSS 的 z-index 屬性
  • 承上,此 Flash 會遮住所有重疊到的 HTML 元素
  • 是三種模式中效能最好的。

若你的網頁沒有任何會重疊到的 HTML 元素(例如 LightBox),那當然就使用這種模式。
相反地若有重疊的 HTML 元素,不管 z-index 怎麼設定、Flash 皆會顯示在最上面、造成一種破版的感覺

左邊貓咪是一個 Flash Movie,透明的綠色區塊則是 z-index 較高的 div 元素,在 window 模式下 div 是無法蓋掉 Flash 的。

看看範例程式



2. opaque 模式

說真的我對上面的 window 很陌生,或許是預設值的關係、很少在原始碼看到。而這個 opaque 就常見得多了。

wmode =
  • opaque 就是不透明的意思,所以在此模式下,背景仍然是不透明
  • 可以設定 CSS 的 z-index 屬性

喔喔!旁邊的貓咪 Flash Movie 已經正確地被較高 z-index 的 DIV 元素給蓋掉了耶~
這邊的不透明指的是 Flash Movie 的背景色。在此模式中是無法看到下方的文字的

回想我過去的情況、設定 opaque 就可以解決所有問題了,因為大多是固定式的 Flash 廣告與我的 HTML 元素重疊到。根本沒有必要用效能較差的 transparent

看看範例程式


3. transparent 模式

wmode =
  • 同字義,在此模式下 Flash Movie 的背景將會變成透明
  • 效能最差

上面兩種模式的 Flash 都有淡藍色的背景,而在 transparent 模式中變成了透明。
不但如同 opaque 中 z-index 可以正確設定、也讓其底下的文字可以顯示
而效能的問題,因 Flash 有變化的時候必須偵測那些地方是可視的,效能自然最差。

我唯一有想到適合 transparent 模式的就是那種得飛來飛去、或占很大版面的 Flash 廣告,這些情況大都不適合遮掉後面的文字。

看看範例程式




動態更新 wmode 屬性

有些網站的 Flash(例如 Youtube 的播放器)會遮掉我的 HTML 元素,
因此我需要寫一個 JavaScript 處理頁面上所有的 Flash Movie,讓他們不要擋到。
而了解 wmode 後,我知道我只需針對 window 模式 Flash Movie 更新為 opaque 即可。

本來以為只要 HTMLElement.setAttribute("wmode", "opaque") 即可,
這樣做是沒有用的。因為 Flash Movie 只有在初始化時才會讀取 wmode 做 rendering
並不會與 HTML 交互作用。唯一的方法就是重新載入,innerHTML、outerHTML 或 replaceChild 都是可行的作法。

我寫了一支 fix-flash.js,只要引用並在 window.onload 後呼叫 fixFlash() 即可自動取代。

window.onload = fixFlash;


Comments

  1. katekk1200000 2012-06-19 18:01:13
    我的YAHOOBLOG 不知為何 貼上以下 EMBED碼無法顯示 怎麼辦 如何改
    最流行的風鈴這類也貼不上耶!~



    意見者:katekk1200000@yahoo.com.tw
    發表時間: 2012-06-19 17:57:05

    ____ (embed wmode="transparent" width="180" height="300" src="http://flash.murmur.tw/widget/deep.swf?uid=KATEKK120000014&style=5")
    測試時 請將( )改 < >
  2. awed 2012-01-13 18:27:46
    没看懂怎么用,我是想在有些地方要使用wmode=transparent,有些地方是window,如何切换呢?
  3. leeight的马甲 2011-06-27 22:52:04
    fixFlash是否会导致flash重新渲染一次呢?
    另外,如果把Flash节点从clone了一次,是否会导致Flash原来暴露给JS的接口失效了呢?
  4. josephj 2011-06-21 18:27:42
    挖! bingo 你看真細
    已經改掉啦
    感謝感謝 ^ ^
  5. BlackBingo 2011-06-21 17:59:31
    hi Awoo, 有個小問題,
    Line 45: if (e.getAttribute("wmode") && e.getAttribute("wmode").toLowerCase() === "window") {
    若未設定wmode預設為window, 建議改一下這邊的判斷。
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment