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