Safari 扩展将 iframe 覆盖到每个页面上

Question

我正在编写一个 Safari 扩展。当我单击工具栏中的按钮时，它需要将其他来源的内容覆盖在页面顶部。

如何将其放置在浏览器的左上角、内容之上？当我点击关闭按钮时，iframe 应该被销毁，显示之前被覆盖的内容？

谢谢！

Answer 1

您可以将 CSS 置于内联或样式表中。

<iframe src="http://path.to/content" style="width: 200px; height: 100px; 
position: absolute; top: 0; left: 0; z-index: 100000;" id="overlay_frame"></iframe>

然后，对于“关闭”链接，您可以选择完全销毁 iframe：

<a href="#" onClick="document.getElementById('overlay_frame').removeChild( 
document.getElementById('overlay_frame').childNodes[0] );">Close</a>

或只是隐藏它：

<a href="#" onClick="document.getElementById('overlay_frame').style.display='none';">Close</a>

就我个人而言，我只是隐藏它，以便您可以通过更改源来重新使用它：

<a href="#" onClick="document.getElementById('overlay_frame').src='http://link.to/something/else';">Change Frame</a>