flash wmode="window&qu…

引用一段话：opaque和tranparent由于都是无窗口内渲染模式，能很好的实现各层的遮挡，和一般div元素没有太大区别，而window、direct模式在现在看来，是没有任何办法实现被DHTML元素完美遮挡的，其中一个比较折中的方法就是使用iframe。方法就是为要覆盖在flash元素上的div层准备一个空的iframe，当需要展现这个div时，将iframe移到flash元素的上方，并将大小、位置调整为div的大小和位置，然后通过设置position和z-index让div覆盖在iframe的上方，目前看到优酷、迅雷看看、乐视的播放页对顶部的导航栏有做这样的处理。其原理就是利用iframe在展现的时候（当页面滚动和其他操作时，会导致flash元素重新覆盖iframe @_@）可以覆盖在flash元素上。

原文：http://www.cnblogs.com/_franky/archive/2010/11/19/1882055.html

flash wmode="window" 时的遮挡问题.

在本文开始前 , 我先引入,摸同学的文档. 来说明一些问题.然后我在此基础上,会做一些扩展说明.

文档地址 : http://www.w3help.org/zh-cn/causes/RX8012.

基于以上的认识,我们开始接下来的话题...

我们所要解决的是这样一种需求: 当我们 现在有一个很大滴 flash 在页面上,且wmode 必须为window的前提下...如何使我们的一些元素不被 flash遮挡的呢?

遗憾的是,我所能给出的答案是 . 并不完美.我仍然无法搞定 opera 和 safari 两款浏览器. 那么此文 希望可以起到抛砖引玉的作用吧.

其实答案很简单. 在展示元素下面、flash上面放一个iframe. 

一个最佳实现方式是: 

z-index:-1;position:absolute;top:0;left:0;border:0">

把这样的一个iframe 按照你喜欢的方式 放入元素中.(应该是该元素直系子节点.)其中 width height 为元素宽高. 重要属性z-index:-1.是我们的救星.

当然,最后别忘了加个透明度 0 ..否则ie下很郁闷.

好吧中心思想就是这个.但是,这个办法并不是所有浏览器都有效. 并且,各个浏览器总会有这样或那样的bug存在:

严重问题:

Safari : 无效.

Opera : 无效.

FireFox 3.6 及 4.0 beta : 无效.

FireFox 3.5 及之前版本 . 元素 position : fixed 以外的值. 无效. (即必须当节点的position:fixed时,才ok )

幸运的是对于FireFox3.6 及4.0 beta 我们已经无需借助iframe来修复.只需要给元素简单设置一个background 非  transparent 的值即可.

要注意的是,如果background 是一个image 那么,如果image 有透明部分,则任然会有问题.

FireFox 3.6 及 4.0 beta : 当使用background 修正时,如果这个修正仅针对元素内部的表格元素的 空td 则无效.(解决办法给td : display:block,或想办法 让td具备一个有效的宽高).

对于 FireFox 3.5 及之前版本,首先我建议放弃修复, 如果非要修复.则只好使用position:fixed,再配合中间的iframe,然后通过一系列js 修补其行为.让他看起来是正常的.

一些小问题:

IE6-IE9beta : 在flash与当前窗口上其他元素 切换焦点时, 元素会被flash遮挡.

IE7: 当 元素为 position:fixed时,滚动条滚动后.元素会被flash遮挡.

搜狗高速浏览器 2.1及之前的版本,webkit内核下: 当元素位置发生改变时. 会保留一个残影.(残影数一般只有一个,由于中间的iframe造成)

以上小问题.都可以通过触发Render Tree 全局 Reflow 修复.  除了QQ

考虑下面的代码:

     

          var border = document.body.style.border ; 

          document.body.style.border = border == 'solid 1px #000'  ?  'solid 2px #000' : 'solid 1px #000' ; 

          document.body.offsetWidth; //强制浏览器flush当前的ui update 队列.
          document.body.style.border = border; //恢复border 原始值.

border 属性和值是随意的.只要你能引起全局的reflow 并且视觉上无影响.如何做都是可以的.. 比如ie下 可以用.body.style.zoom.

你甚至可以不实用offsetWidth,在1、0之间切换 zoom ,就可以直接造成reflow...  读取body.offsetWidth.可以绕过.浏览器对ui update 队列的优化.

其实 代码仍然不够严谨. 因为 原始的boreder 很可能 影响reflow的 borderWidth 受css样式影响, 即原来就是1px,那么上面的代码,很可能只会触发repaint,而不是我们期望的reflow. 具体情境 需要大家根据实际情况来做了. 

棘手的小问题:

QQ5  浏览器   webkit 内核下: 当元素位置发生改变时,产生残影造成花屏的现象.

此问题,全局reflow可以改善花屏效果.但连续移动中.视觉上更多的感觉是.元素被flash遮盖住了.直到元素停止移动.

搜狗高速浏览器 2.1及之前的版本,webkit内核下: 当元素所处 平面位置在flash外边时,而此时元素内部某子元素通过定位调整. 与flash 在平面上有交集时,交集部分会被flash遮盖.

此问题.需要修改元素 DOM结构来解决.暂时也无甚好的方法.

所有使用. chromium开源项目的 webkit内核的浏览器如:Chrome全系,maxthon3、搜狗高速浏览器、QQ5浏览器、360高速浏览器.下

使用iframe修复遮盖后. 动态修改 元素.style.clip 时. 由于元素可视区域变化.而造成的 iframe 残留阴影问题(此阴影与flash下面的背景同色).

应避免使用clip属性. 以避免此bug的出现.

所有chrome8+的webkit内核浏览器共有的渲染bug.当用来遮罩的iframe的z-index为-1(即使其父节点也是绝对定位,且具备非常高的z-index).的情况,如果页面中某一个flash(wmode==window),采用绝对定位(除非其父节点也为绝对定位,即flash没有脱离布局流).则会造成iframe遮罩层是去作用,被浏览器处理为x层级在flash之下了..更加怪异的是,其中任何一个flash 采用绝对定位，其他flash也会受影响. 

解决办法:

    1.避免直接给flash(object、embed)设置绝对定位或fixed 等使其脱离布局流的做法.除非使其父节点使用绝对或fixed定位.

    2.给flash元素设置 z-index: -1.

    3.避免iframe遮罩层,使用z-index:-1方式.而采用动态计算表层div位置.跟随的方式.对flash进行遮罩.

好了 到了结束的时候了..

列出毛病最少的几个浏览器 也就是基本不需要使用 reflow的浏览器

chrome  maxthon3 搜狗高速浏览器2.2 FF3.6 +  以及使用比较新的chromium 开源项目所提供内核的浏览器 比如 360 高速浏览器 以及 等等 所谓高速浏览器的 国产山寨货们.

其中比较难搞的浏览器是搜狗2.2 和之前版本的 webkit判断.. 当然userAgent是有区别. 我仍然给出一个基于特性的检测方法:

     var win = window,

     isWebkit = !!+'v1' && !win.XDomainRequest && !navigator.taintEnabled;

     if(isWebkit && !!win.external && 'StartPageCall' in external && !('localdb' in external)){

          //这里是你需要修复的搜狗高速浏览器webkit内核下 版本小于2.2的 浏览器 需要的逻辑.

     }

好吧,代码很悲剧.我不得不承认这一点.

版权声明：本文为博主原创文章，未经博主允许不得转载。