谜题：不同域的 iframe 需要动态“重叠”父内容答案

【问题标题】：Puzzle: different domain iframe needs to dynamically "overlap" parent content谜题：不同域的 iframe 需要动态“重叠”父内容
【发布时间】：2011-05-09 11:26:54
【问题描述】：

这对 Stack Overflow 天才们来说应该是一个有趣的谜题：

我正在构建一个浏览器插件，它将div、script 和iframe 注入到客户端正在查看的任何页面的标记中。目的是将工具栏锚定到每个页面的底部（StumbleUpon 为 Chrome 执行此操作）。这是放在</body>之前的代码：

<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
    <iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>

此工具栏 (iframe) 将托管在我们的服务器上，并具有弹出面板。当用户点击打开菜单时，菜单会垂直扩展工具栏（例如，工具栏高度为 35 像素；面板为 100 像素）。

我可以在 Safari、Firefox 和 Chrome 中通过让我的工具栏位于透明背景上的所有内容之上来完成此操作（即 div 和 iframe 的 height: 100% 和 background-color: transparent）。但这不适用于 IE7、IE8、IE9。

我尝试过 (1) 使用 background: blank.gif 而不是 background-color: transparent，以及 (2) 将 script 注入到具有调整大小功能的父级中，我可以使用 parent.resizeFunction(height) ("resource拒绝”）

关于如何解决这个问题的任何想法？非常感谢！

【问题讨论】：

标签： javascript css iframe cross-domain

【解决方案1】：

我必须运行所以无法测试它，但 IE 似乎监听了非标准的ALLOWTRANSPARENCY 属性。

当属性设置为false时，对象的backgroundColor属性只能是窗口的。当该属性设置为true时，对象的backgroundColor属性可以设置为任意值，包括默认值transparent。

【讨论】：

工作就像一个魅力。再次感谢佩卡！我刚刚意识到，对于所有浏览器，父项中的任何内容都无法单击（因为它位于 height: 100% div 后面。不幸的是。我将作为另一个问题打开它。