iframe 叠加版式扩展程序中的 Flash 内容

Flash content in iframe overlaying chrome extension

本文关键字：Flash 内容 程序 扩展 叠加 iframe      更新时间：2023-09-26

简而言之

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

问题

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

基本上，这是一个带有position:fixed的<div>标签。

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

问题所在

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

我想避免什么

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

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

我相信

你的问题与此非常相似：在youtube iframe上覆盖不透明的div

如果我理解正确，可以通过在您的 iframe 嵌入中添加 wmode=opaque 参数来解决此问题。例如（带有YouTube视频）：

- HTML iframe 嵌入

确保 wmode=opaque 参数是 iframe 源网址之后的第一个参数（如此处所述：在 youtube iframe 上叠加不透明div）

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

}

相关文章：