wmode参数详解，对flash以及html元素的影响(转载)

在页面中经常会用到需要用div来覆盖flash的情况，如梦幻人生项目中有一个游戏场景是全flash的，聊天窗口是普通的div代码，聊天窗口在打开的时候需要盖在flash的上面，如下图：

但 是通常情况下用div是盖不住flash的，不管你如何设置这二者的z-index都是不可能的。解决这个问题的关键在于设置放flash的embed或 object 中wmode的属性，wmode的属性有三种值：opaque，transparent 和 window。我们来看看这三种模式的解释：

Opaque 模式
这 是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可 以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透 明模式，在这种模式下flash player会将stage的背景色alpha值为0，并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的 深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

window 模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似 显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。

 

看了上面的解释，相信你已经有一定了解了。下面我们来应用一下。测试时的浏览器及版本是：ie7/8, ie6, FF3.6+, Safari5.0, Opera10+ 。

注：为了看得更清楚，我把不必要的参数和样式都省略了

例1：wmode="Opaque" 和 wmode="Transparent"

<div id="flash-part" style="position:relative; z-index:1 ;">
<embed wmode="Opaque " src="http://hadaiye.blog.163.com/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3; ">&nbsp;</div>

wmode为Opaque（不透明），这种设置可以让layer-part 在 flash 之上，在以上的浏览器中测试都能通过，效果如下图：

wmode="Opaque" 和 wmode="Transparent" 的效果是一样的，所以就不再赘述。

例2：wmode="window"
<div id="flash-part" style="position:relative; z-index:1 ;">
<embed wmode="window " src="http://hadaiye.blog.163.com/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3 ;">&nbsp;</div>

将wmode改成window后问题出来了，根据上面的解释，window模式是独立于浏览器窗口之上的，只是看上去在浏览器上而已，z-index已经不起作用了。我测试了一下，除了强大的FF3.6+ ，其它浏览器都正确地显示了flash的位置，layer-part被正确地压在了flash的下面。如下：

解决方法： 用一个iframe来盖住flash，同样也是用z-index来定层高。代码如下：
<div id="flash-part" style="position:relative; z-index:1; ">
<embed wmode="window " src="http://hadaiye.blog.163.com/blog/#" />
</div>
<iframe style="position:absolute; z-index:2;></ iframe>
<div id="layer-part" style="position:absolute; z-index:3 ;">&nbsp;</div>
但这个方法也不是在所有的浏览器中都有效，此方法对Safari, Opera无效 。在FF，IE，Chrome下的效果如下图（白色部分是iframe）：

为 什么iframe可以在部分浏览器中挡住 flash？这个问题我也搜索了一下，找到的解释是这样的，在ie5.5以前，iframe是一个windowed element，也就是说，它也在浏览器上有一个独立的窗口，类似于flash的window模式。在ie5.5之后的版本中iframe虽然被定性为了 windowless element但是似乎它的存在形式并没有完全等同于windowless的元素，某些浏览器对它的显示还是可以当windowed元素使用。

下面我们要介绍一种更变态的运用，把一个window模式的flash放到一个iframe中，再用一个iframe去盖它，看看会发生什么……我们的预期是希望第2个iframe能盖住在第1个iframe中的flash 。
例3：wmode="window" in iframe
<iframe src="http://hadaiye.blog.163.com/blog/tempflash.html" style="position:absolute; z-index:1;" ></iframe>
<iframe style="position:absolute; z-index:2;"></iframe>
<div id="layer-part" style="position:absolute; z-index:3;">&nbsp;</div>
（tempflash.html 页面中放着一个wmode="window"的flash ）
IE，FF下：

Chrome，Safari，Opera下（覆没了）：

这下可以按我们的预期的显示的只剩下ie 和FF了。其它浏览器都让我们失望了，我不知道这”失望的显示“是正确的还是错误的，因为我找不到第1个iframe中的flash与第2个iframe之间正确的关系应该是怎么样的 。但是我觉得 safari和opera也许是正确的。windowed的元素应该要比windowless 的元素绝对层级更高些吧。

也许有人会问不用wmode="window"模式不就可以了，干麻还要这么麻烦地研究它呢，但是对于需要使用输入法的flash游戏来说只能使用window模式，其它模式都会使输入法失效(变态)，所以这其实是我工作中遇到的问题，拿出来和大家分享一下。