与浏览器互动后，如何防止Iframe破坏浏览器的历史记录？

Question

因此，在我的情况下，我使用iframe将Grafana附加到页面上（这为我提供了美观且易于使用的图形）。

可能会注意到，每次对图形进行放大或缩小（使用鼠标单击）的交互之后，Grafana的iframe都会触发我的Angular页面上的某种刷新，从而弄乱了浏览器的历史记录。我看不到iframe的src发生任何更改以证明刷新此页面是合理的，并且它显然不会触发任何操作（例如，不会触发任何加载）。

这是正常现象吗？我该如何预防？

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

Answer 1

希望能提供帮助，在您遇到的情况下我可能会尝试做一些事情：

1. 一个空白的html页面，其中仅包含grafana iframe。查看它是否仍刷新父页面。如果不是，那么问题可能出在角度上。

2. 您说沙盒破坏了iframe？也许玩不同的沙盒值。像allow-scripts一样，看看它是否需要这些值之一来工作

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

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

将您的角度html代码发布到该问题也可能会有帮助。可能会有一些提示。

Answer 2

在没有有效实施iframe的情况下，很难提出最佳的行动方式。

想到的最简单的解决方案是iframe的{​​{1}}属性：

sandbox

什么是iframe沙箱？

sandbox属性为iframe中的内容提供了一组额外的限制。

存在沙箱属性时，它将：

  

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

     

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

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