如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录？

Question

因此，就我而言，我使用 iframe 将 Grafana 附加到我的页面（这为我提供了美观且易于使用的图表）。

可能会注意到 Grafana 的 iframe 会在图表上的每次放大或缩小（使用鼠标单击）交互后触发我的 Angular 页面上的一种刷新，从而弄乱浏览器的历史记录。我在 Iframe 的 src 上没有看到任何更改来证明此页面刷新是合理的，并且它显然不会触发任何事情（例如，不会触发任何 onload）。

这是正常行为吗？我怎样才能防止这种情况发生？

我正在使用 Grafana 6.2.2 版和 Angular 6.1 的脚本仪表板。

Answer 1

希望能提供帮助，我可能会在您的场景中尝试一些事情：

1. 只有一个 grafana iframe 的空白 html 页面。看看它是否仍然刷新父页面。如果不是，那么问题可能出在 Angular 上。

2. 您说沙盒会破坏 iframe？也许可以使用不同的沙盒值。像 allow-scripts 一样，看看它是否需要这些值之一才能工作

   https://www.w3schools.com/tags/att_iframe_sandbox.asp

3. 也许尝试将 grafana iframe 放入另一个 iframe。我以前从未这样做过，但它可能会尝试刷新父 iframe 而不是父页面。

将您的 Angular html 代码也发布到问题中可能会有所帮助。里面可能有一些提示。

Answer 2

如果没有 iframe 的有效实施，很难提出最佳的行动方式。

想到的最简单的解决方案是iframe的sandbox属性：

<iframe src="my_iframe.html" sandbox></iframe>

什么是 iframe 沙盒？

沙盒属性为 iframe 中的内容启用了一组额外的限制。

当沙盒属性存在时，它将：

• 将内容视为来自唯一来源
• 阻止表单提交
• 阻止脚本执行
• 禁用 API
• 防止链接针对其他浏览上下文
• 防止内容使用插件（通过 、 、 或其他）
• 阻止内容导航其顶级浏览上下文
• 阻止自动触发的功能

沙盒属性的值可以只是沙盒（然后 应用所有限制），或以空格分隔的列表 将删除特定限制的预定义值。

参考：https://www.w3schools.com/tags/att_iframe_sandbox.asp