iframe中的Flash内容覆盖了Chrome扩展程序

时间:2012-08-07 05:54:45

标签: javascript google-chrome google-chrome-extension

简而言之

寻找一种在闪光灯位于iframe内的闪光灯顶部显示位置=固定div的方法。

问题

我目前正在开发一个谷歌浏览器扩展程序,在窗口顶部显示视觉辅助工具。

基本上,这是一个<div>标记position:fixed

问题是某些网站会显示Flash内容,当我的扩展程序位于这些Flash元素之上时,它们会覆盖它。我想找到一种方法在这些flash元素之上显示我的内容。

问题

flash位于iframe元素中,并且将wmode设置为window,这意味着它会覆盖所有内容。但是,我无法更改flash元素的内容,因为它位于不同的域中(尝试导致同源错误)

我想避免什么

我想避免在每个网站上运行扩展程序,并检查其引荐来源是否是我正在运行的网站

2 个答案:

答案 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;

}