Question

简而言之

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

问题

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

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

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

问题

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

我想避免什么

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

Answer 1

您可以在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

Answer 2

我相信您的问题与此问题非常相似：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;

}

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

2 个答案: