简而言之
寻找一种在闪光灯位于iframe内的闪光灯顶部显示位置=固定div
的方法。
问题
我目前正在开发一个谷歌浏览器扩展程序,在窗口顶部显示视觉辅助工具。
基本上,这是一个<div>
标记position:fixed
。
问题是某些网站会显示Flash内容,当我的扩展程序位于这些Flash元素之上时,它们会覆盖它。我想找到一种方法在这些flash元素之上显示我的内容。
问题
flash位于iframe元素中,并且将wmode设置为window,这意味着它会覆盖所有内容。但是,我无法更改flash元素的内容,因为它位于不同的域中(尝试导致同源错误)
我想避免什么
我想避免在每个网站上运行扩展程序,并检查其引荐来源是否是我正在运行的网站
答案 0 :(得分:2)
您可以在iframe的上下文中执行脚本,如下所示:
var code = '[].forEach.call( document.querySelectorAll("embed"), function(embed){embed.setAttribute("wmode", "transparent")});';
chrome.tabs.executeScript( tabRef, {
code: code,
allFrames: true //Executes the script in all frames
}, function() { });
这会找到所有嵌入元素,并将wmode
设置为"transparent"
,以便html元素可以叠加它们。
请参阅:http://developer.chrome.com/extensions/content_scripts.html#pi
答案 1 :(得分:1)
我相信您的问题与此问题非常相似:overlay opaque div over youtube iframe
如果我理解正确,可以通过在iframe嵌入中添加wmode = opaque参数来解决此问题。例如(使用youtube视频):
- 嵌入HTML iframe
确保wmode = opaque参数是iframe的源网址之后的第一个参数(如此处所述:overlay opaque div over youtube iframe)
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/CMNry4PE93Y?wmode=opaque" frameborder="0"></iframe>
- CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}