網頁上多个swf 的 z-index操作

當在網頁上,同時存在多個swf案,若需要指定某一個強制在最上層
不受其他物件遮蔽,以下注意事項
.wmode的影響
用來嵌入flash用的embed tag上的wmode會決定swf在網頁上的顯示方式

1.embed tag沒有設定wmode

  預設Window

  如果去偵測wmode

  FFChrome測到$("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")
是不可行的,
需要透過寫入整個innerHTMLouterHTML讓瀏覽器
重新顯示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所在divz-index
即可調整其上下位置
$("#flashContainer").css("z-index",1000)

 

你可能感兴趣的:(z-index)