對許多Front-end工程師來說,同時在網頁處理Flash物件與JavaScript是很麻煩的一件事,例如Flash往往與JavaScript爭先恐後搏版面,遮住JavaScript的彈出視窗效果(如下圖),此時就算把z-index參數加到破表都沒有辦法掙脫Flash的枷鎖。有些工程師可能使用iframe迂迴各個擊破,不過這裡要提供更簡單的方法讓JavaScript效果重現天日!
使用SWFObject嵌入Flash物件
為了解決這個問題,我們使用SWFObject而非<object>標籤來嵌入Flash物件,以插入一則YouTube影片為例,原本的程式碼如下:
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
但光這樣仍無法逼退頑強的Flash物件,如下圖:
再加上wmode參數加持,就可以輕鬆搞定:
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
如此一來,JavaScript彈出效果終於重見光明:
很容易吧! 或許應該建議開心農場的開發團隊試一試:
延伸閱讀:
- 解決 Flash 蓋住彈出目錄的方法
- swfobject
read more...