`
joe.feng
  • 浏览: 134115 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

    博客分类:
  • Flex
阅读更多

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

各浏览器中用iframe覆盖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 之上,在以上的浏览器中测试都能通过,效果如下图:

各浏览器中用iframe覆盖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的方法,以及不能覆盖的情况 - 艾斯特 - 艾斯特,贴贴的博客
解决方法: 用一个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的方法,以及不能覆盖的情况 - 艾斯特 - 艾斯特,贴贴的博客

为 什么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下:
各浏览器中用iframe覆盖flash的方法,以及不能覆盖的情况 - 艾斯特 - 艾斯特,贴贴的博客
Chrome,Safari,Opera下(覆没了):
各浏览器中用iframe覆盖flash的方法,以及不能覆盖的情况 - 艾斯特 - 艾斯特,贴贴的博客

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

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

分享到:
评论

相关推荐

    flash文件网页播放源码index.html

    在这个例子中,“your.swf”是SWF文件的路径,其他参数如`quality`、`wmode`等会影响Flash的显示效果。 2. `&lt;embed&gt;`标签:HTML5引入了新的`&lt;embed&gt;`标签,简化了Flash的嵌入。虽然`&lt;object&gt;`仍然是推荐的跨浏览器...

    html元素遮挡flash详解示例

    在Flash对象中,有一个名为`wmode`的参数,它用于定义Flash与浏览器的交互方式,对解决HTML元素遮挡Flash的问题至关重要。`wmode`有三种主要模式: 1. **transparent(透明模式)**:在这种模式下,Flash内容允许...

    符合web标准的flash调用方法,解决了浏览器对flash的影响

    3. **参数设置**:开发者可以通过`swfobject.embedSWF()`方法指定Flash对象的参数,如Flash文件的URL、宽度、高度、版本号、以及额外的Flash参数等。 4. **回退机制**:如果用户浏览器不支持Flash或者禁用了Flash,...

    ecshop flash 广告 覆盖活动html bug

    总的来说,解决ECShop中的Flash广告覆盖问题,需要对Flash的嵌入代码进行调整,尤其是`wmode`参数,以便实现与页面其他元素的和谐共存,同时考虑性能优化。此外,随着HTML5技术的发展,许多现代浏览器已经不再支持...

    页面flash单击控件取消

    6. **使用Wmode参数**:在Flash嵌入代码中添加`wmode`参数,如`wmode="opaque"`或`wmode="transparent"`,这可以使Flash与HTML元素更好地交互,有时可以解决点击穿透问题。 7. **移除Flash**:如果Flash内容不是...

    实现flash的透明背景

    值得注意的是,设置`wmode`为`transparent`可能会对Flash的性能产生一定影响,特别是对于含有复杂交互和大量图形的动画,因为透明背景会使得Flash需要处理更多的渲染工作。 此外,为了方便观察透明效果,作者在HTML...

    下拉菜单被flash给挡住了,解决方法!!

    2. **重新排列元素顺序**:如果`wmode`调整无效或者不适用,可以尝试调整HTML结构,将Flash元素放置在下拉菜单元素之后。这样,虽然Flash加载后仍然会覆盖下拉菜单,但由于HTML的渲染顺序,下拉菜单会在用户交互时...

    网页中flash wmode属性你会用吗?

    这个`wmode`(Window Mode)属性对Flash与HTML的交互方式产生了重大影响。 首先,让我们深入理解这三个不同的窗口模式: 1. **Window**:这是`wmode`的默认值。在这种模式下,Flash内容在Web页面上以一个独立的矩形...

    143种透明Flash打包下载

    然而,需要注意的是,虽然`wmode="transparent"`可以使Flash背景透明,但它可能会对性能产生一定影响,尤其是当Flash内容复杂或与其他网页元素交互时。此外,不同的浏览器和Flash版本可能对`wmode`的支持程度不同,...

    在HTML中给FLASH加链接

    这对于透明的FLASH尤其有用,因为它可以与页面的其他元素无缝融合,同时还能保持交互性。下面我们将详细介绍如何在HTML中实现这个功能。 首先,我们需要了解HTML的基本结构。HTML(超文本标记语言)是用于创建网页...

    Flash插件本地下载

    #### 2.2 参数详解 - **codebase**:指定Flash插件的来源。 - 当`SysDownloadFlashFashion`为1时,从Adobe官方服务器下载。 - 当`SysDownloadFlashFashion`不为1时,从本地服务器下载。 - **wmode**:设置Flash...

    解决fusionChart的flash图表覆盖其他页面的方法

    1. **兼容性**:虽然设置`wmode`参数为`opaque`可以有效解决覆盖问题,但也需要注意这种设置可能会影响到Flash对象的性能,特别是在老版本的浏览器中。 2. **HTML5替代方案**:考虑到Flash技术已经逐渐被HTML5所取代...

    FLASH制作透明方法

    接下来,我们将深入解析如何在Flash中实现透明效果,以及“wmode”参数在其中扮演的角色。 ### Flash中的透明性控制 在Flash中,透明性的调整主要通过以下几种方式进行: 1. **Alpha通道设置**:Alpha通道是用于...

    swffit flash+html 适应窗口

    同时,可能还需要设置Flash的`wmode`参数为`transparent`或`opaque`,以实现最佳的浏览器兼容性和性能。 5. **兼容性**:SwfFit设计时考虑了跨浏览器兼容性,支持主流的现代浏览器,如Chrome、Firefox、Safari、...

    网页flash背景透明代码

    在上述代码中,`wmode`参数被设置为"transparent",这告诉Flash Player和浏览器要启用背景透明。 然而,即使你正确设置了`wmode`,仍可能遇到某些浏览器不支持或表现不佳的情况。这时,可能需要对不同浏览器采用...

    Flash+js禁用flash右键

    JavaScript可以跨平台地操作网页的DOM元素,包括嵌入的Flash对象。 在HTML中,我们可以使用`&lt;object&gt;`或`&lt;embed&gt;`标签嵌入Flash内容,并通过JavaScript控制它们。例如,以下代码展示了如何在JavaScript中禁用Flash...

    Flash虚框三种解决方案

    在`&lt;param&gt;`标签中添加`wmode`参数,设置其值为`opaque`或`transparent`,可以消除虚框并改善与页面其他元素的叠加效果。例如: ```html &lt;param name="wmode" value="opaque" /&gt; &lt;!-- 其他param标签 --&gt; ``` 3...

Global site tag (gtag.js) - Google Analytics