在页面中经常会用到需要用div来覆盖flash的情况,如梦幻人生项目中有一个游戏场景是全flash的,聊天窗口是普通的div代码,聊天窗口在打开的时候需要盖在flash的上面,如下图:admin管理员组文章数量:1659605
但是通常情况下用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/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3;"> </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/blog/#" />
</div>
<div id="layer-part" style="position:absolute; z-index:3;"> </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/blog/#" />
</div>
<iframe style="position:absolute; z-index:2;></iframe>
<div id="layer-part" style="position:absolute; z-index:3;"> </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/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;"> </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模式,其它模式都会使输入法失效(变态),所以这其实是我工作中遇到的问题,拿出来和大家分享一下。
至此,我的研究告一段落,如果有哪位牛人知道更多的,请留言告诉我吧~~不甚感激!
转自: http://hadaiye.blog.163/blog/static/2073599201063023425574/
版权声明:本文标题:各浏览器中用iframe覆盖flash的方法,以及不能覆盖的情况 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729837176a1214455.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论