防止 iframe 内部位置更改影响浏览器历史记录答案

【问题标题】：Prevent internal location changes of iframe from affecting browser history防止 iframe 内部位置更改影响浏览器历史记录
【发布时间】：2022-01-19 15:21:53
【问题描述】：

注意：有很多问题被问到发帖者在哪里从外部将新位置写入 iframe，并被告知使用 location.replace。这不是我的情况。

编辑：我在下面留下了最初的描述，但我决定用更简单的术语再次描述这个问题。如果我无法控制 iframe 的位置更改，因此无法使用 location.replace，如何阻止 iframe 接触浏览器的历史记录？

原文说明：我的 Web 应用程序正在 iframe 中运行 Angular 应用程序。此 Angular 应用程序中的用户行为通常会导致将新位置写入 iframe，这显然会级联并将新项目添加到浏览器历史记录中。有没有办法阻止iframe以这种方式影响外部浏览器，因此内部角度应用程序根本不会触及历史记录？

【问题讨论】：

你能举个例子吗？我没有看到 iFrame 内部的代码如何影响 iFrame 外部的代码，但也许您正在使用 postMessage 函数？
我不确定这是否足够具体，但是当用户与 UI 交互时，在 iframe 中运行的应用程序使用角度路由器导航到新页面。只需单击将您带到应用程序中的新页面的 UI 元素。当路由器用于导航到新页面时，iframe 的位置会更新。在我看来，它是 iframe 的一些内置行为，对其位置的任何更改都会级联到浏览器。据我了解，我的问题与 iframe 中运行的内容无关。
“在我看来，对其位置的任何更改都会级联到浏览器，这是 iframe 的一些内置行为。” - 是的，就是这样浏览器在 (i) 框架中的导航行为。单击后退按钮应该让用户回到以前的状态 - 如果更改仅发生在 iframe 内，则返回历史记录中的一个位置必须仅在 iframe 内恢复该更改。我认为您对此无能为力，除了让 iframe 中的应用程序一开始就表现得不同。

标签： javascript angular iframe browser-history

【解决方案1】：

iframe 的沙盒属性可以解决这个问题。使用Angular路由器的示例程序进行测试。只要沙盒只设置allow-scripts，iframe就不会影响浏览器的导航。

<iframe src="your url" sandbox="allow-scripts"></iframe>

【讨论】：

谢谢！我不知道为什么我所有的谷歌搜索都不会导致沙盒属性。我死了。
嗯，虽然我认为沙盒属性是一个很好的了解工具，但经过大量测试后，它似乎并没有解决我的问题。
你能提供一个问题的例子吗？使用iframe的sandbox属性，对于angular路由器示例程序，在本地测试可以防止它影响外部页面的历史。如果影响到页面的其他功能，可以添加沙箱的一些其他属性，比如allow-forms等。