div显示在object、embed插件之上

最近做个项目,要求在embed内容可以被div遮挡,实际上就是个播放器,当div移到插件上面时候不会被播放的内容挡住,搜寻了很久才勉强找到了个不完美的解决方案。

这里先介绍下在embed会遮挡住div的原因:

我们平常所做的plugin无非两种,有窗体的和无窗体的,有窗体的插件是不透明的(opaque)将会遮挡其他部分,其优先级在页面中也较高,一般的DOM元素都要被其遮挡,这个时候设置z-index是无效的。无窗体的插件则是可以根据情况设置其透明度。关于plugin的窗体问题可以参见https://developer.mozilla.org/en/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Making_a_Plug-in_Transparent

如果你要实现的Plugin是无窗体的,或者不需要窗体句柄有无窗体都可,为实现div遮挡问题可以考虑通过创建无窗体plugin的方法。

flash中实现div遮挡的方法:

flash的Object标签具有wmode属性,设置它即可实现div显示在plugin之上,<param name="wmode" value="transparent">

若是embed标签可以在标签中加入wmode="transparent"属性解决。实际上wmode属性的原理就是无窗体plugin的方法。这里有对flash wmode参数的详细解释:http://www.blueidea.com/tech/web/2009/6469.asp

通过iframe遮挡Plugin的方法:

创建一个iframe标签,然后将其设置为透明,覆盖在object上面,这样再放置div就可以遮住iframe了,不过该方法在ie8\firefox 4+上面都测试通过,在chrome下会出问题,object被iframe遮住的区域会变成白色,很纠结~  ;事实上,在firefox上,只要你的模块是非透明的,不需要iframe一样可以盖在Object上面(当然z-index要足够高)。

var iframeWin = document.createElement("iframe");

iframeWin.id = "ProgressBarIframe";

iframeWin.style.cssText = "position:absolute;top:0;left:800px;width:800px; height:800px;filter:alpha(opacity=0);opacity:0;-moz-opacity:0;z-index:19;";

iframeWin.src ="javascript:false";

document.body.appendChild(iframeWin);

firefox中的效果:

chrome中效果:


iframe在object上始终难以完全透明,这应该不是iframe的问题,不知谁有什么好的解决办法。

以上是我目前所找到的解决div显示在object或embed上的方法,不知道谁有在有窗体情况下,div显示在object上的更好的能兼容所有浏览器的(主要是ie,chrome,firefox)的方法,还请不吝赐教~

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值