div显示在object、embed插件之上

最新推荐文章于 2024-08-10 08:43:25 发布

蜗牛大侠

最新推荐文章于 2024-08-10 08:43:25 发布

阅读量1w

点赞数

分类专栏： HTML

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近做个项目，要求在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中的效果：