iframe层在flash之上是怎么做到的
请看下面的图片,Flash的wmode是window,有独立的窗口,在IE窗口之上,但iframe层却能覆盖在Flash窗口之上,这个是怎么做到的呢?
这个是腾讯的Fusion2技术,
http://wiki.open.qq.com/wiki/Fusion2
摘抄如下:
- 对于Chrome浏览器,Fusion 2只能盖住和引用Fusion 2在同一个页面上的Flash,如果无法避免将Fusion 2和Flash放在同一个页面,请考虑和Safari一样的解决方案。
- 对于其他浏览器,Fusion 2的对话框可以覆盖在wmode=window模式的Flash上。为了提升性能,请尽量使用wmode=window模式。
Answers
根据从网上找的一些资料回答一下,
先来解释下flash的window模式,在window模式下,flashplayer会独立于浏览器核心显示窗口之上自己创建一个显示窗口句柄,这意味着flash影片存在是windows中的一个显示实例,这也让flash达到了最快最高效的渲染模式。由于它独立于浏览器html之外渲染,这就导致flash会遮住与它重合的html,即便是设置了z-index也是无效的。
解决办法,通过iframe来遮罩flash。
简要代码:
<div id="flash_part" style="position:relative; z-index:1; ">
<embed wmode="window" src="http://static.xxx.com//nav_jh.swf">
</div>
<iframe style="position:absolute; z-index:2; "></iframe>
<div id="layer_part" style="position:absolute; z-index:3; ">layer part</div>
实现方法是将flash设为最底层,将iframe通过绝对定位的方式设为中间层盖flash之上,让后再把div设为最上层盖到iframe层之上。
该方法测试IE,FF,Chrome通过,Safari无效 Opera未知。
效果:
解释为什么iframe能遮住flash:
ie5.5以前,iframe是一个windowed element,也就是说,它也在浏览器上有一个独立的窗口,类似于flash的window模式。在ie5.5之后的版本中iframe虽然被定性为了 windowless element但是似乎它的存在形式并没有完全等同于windowless的元素,某些浏览器对它的显示还是可以当windowed元素使用。