2011年7月18日 星期一

網頁上swf z-index操作

當在網頁上,同時存在多個swf檔案,若需要指定某一個強制在最上層
不受其他物件遮蔽,以下注意事項
一.wmode的影響
用來嵌入flash用的embed tag上的wmode值會決定swf在網頁上的顯示方式
1.當embed tag沒有設定wmode
  預設值為Window
  如果去偵測wmode值
  在FF與Chrome測到$("embed").attr("wmode")=false
  在IE則會得到$("embed").attr("wmode")='window'
2.設定wmode='opaque'
  才能讓swf所在的div可以依照HTML上做z-index排列,
  需設定
  embed tag attribute wmode='opaque'

二.動態改變wmode
要讓所有的Browser都可以動態改變wmode屬性值
若只是透過$("embed").attr("wmode","opaque")
是不可行的,
需要透過寫入整個innerHTML或outerHTML讓瀏覽器
重新顯示swf才會得到正確的顯示狀態
$("embed").each(function(i) {               
    embedTag = $(this).attr("outerHTML");        
    if ((embedTag != null) && (embedTag.length > 0)) {
        if (!$(this).attr('wmode') 11 $(this).attr('wmode')=="Window"){
            embedTag = embedTag.replace(">"," wmode='opaque'>");
            $(this).attr("outerHTML", embedTag);
        }        
    }       
});

三.設定swf的顯示位置
只需要改變swf所在div的z-index值,
即可調整其上下位置
$("#flashContainer").css("z-index",1000)

沒有留言: