javascript - 拼图 : different domain iframe needs to dynamically "overlap" parent content

Question

对于 Stack Overflow 天才来说，这应该是一个有趣的谜题:

我正在构建一个将注入(inject) 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 中实现这一点，方法是让我的工具栏位于透明背景上的所有内容之上(即 height: 100% 和 background-color: transparent 代表 div 和 iframe)。但这不适用于 IE7、IE8、IE9。

我试过 (1) 做 background: blank.gif而不是背景颜色:透明，和(2)注入(inject) script进入具有调整大小功能的父级，我可以使用 parent.resizeFunction(height) 调用它(“资源被拒绝”)

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

Answer 1

我要运行所以没法测试，不过IE好像听的不规范ALLOWTRANSPARENCY属性(property)。

When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.