[Flash][JavaScript] 蓋在 Flash 上面的 DIV 與中文輸入的問題

Standard

好久沒發文了,最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外,另一方面在自學 ASP.NET MVC 3 並應用在案子上,有什麼心得會再發文的。

 

扯遠了,來記錄一下最近案子遇到要將 Facebook 粉絲專頁按讚的按鈕蓋在 Flash 內容上面的問題與解法。

 

相信很多人都遇過這個問題,我們會將 DIV 設 z-index,然後在 Chrome 中 DIV 會正常地蓋在 Flash 上面,但到 IE8 上面就被蓋住了。
改 wmode=”transparent” 是常見的解法,但在舊版(如 13.0.782)的 Chrome 中便無法切換輸入法為中文(註:測試在 Chrome 版本 17 中無此問題)。
最後我是寫一段 JavaScript 來判斷,瀏覽器是 IE 就多帶 wmode 為 transparent,反之就不帶。

 

以下是實際的 code。

在這個 Case 中,我們有:

  • 一個 DIV,裡面有 Facebook Like 的 iframe
  • 以 swfobject 方式嵌入的 Flash SWF

 

直接來看 HTML 吧:(節錄)

[code language=”HTML”]
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};

var params = {};

// 其實這邊用 JavaScript 也可以寫,用不著引入 jQuery,剛好有他處使用就順便用囉。
// —
// 是 IE 就多帶 transparent
if (jQuery.browser.msie) {
params = {
quality: "high",
wmode: "transparent"
};
} else {
params = {
quality: "high"
};
}

var attributes = {
id: "flashid",
name: "flashid"
};

// 用 SWFOBJECT 嵌入 SWF
swfobject.embedSWF("root.swf", "Wrapper", "100%", "750", "10","expressInstall.swf", flashvars, params, attributes);
</script>

<style type="text/css">
#fb_like{
position:absolute;
z-index:9999;
color: #FFF;
}
</style>
</head>
<body>

<div id="fb_like">
<iframe src="//www.facebook.com/plugins/like.php?app_id=112956915500219&amp;href=某個粉絲團的網址&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px; background:#4068a0;" allowTransparency="true"></iframe>
</div>

<div id="flashcontent">
<div id="Wrapper">
</div>
</div>
</body></html>
[/code]

 

經測試 IE7,8,9、Chrome 13、Chrome 17、Firefox 都能正常地將 DIV 蓋在 Flash 上,並能正常顯示輸入中文。
若路過前輩有更好的解法請再指教囉 : )

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *