1

简而言之

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

问题

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

基本上，这是一个<div>带有position:fixed.

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

问题

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

我想避免的

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

4

2 回答 2

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

于 2012-08-13T20:08:08.000 回答
1

我相信您的问题与这个问题非常相似：overlay opaque div over youtube iframe

如果我理解正确，可以通过在 iframe 嵌入中添加 wmode=opaque 参数来解决问题。例如（使用 youtube 视频）：

- HTML iframe 嵌入

确保 wmode=opaque 参数是 iframe 的源 url 之后的第一个参数（如此处所述：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;

}

于 2012-08-18T10:28:32.000 回答