Iframe 弄乱浏览器历史记录 - 将当前页面添加到历史记录中

Question

我的网站上有一些带有 iframe 的产品页面。 iframe 的存在弄乱了浏览器历史记录 - 当前页面被添加到历史堆栈中，当我单击后退按钮时，页面保持不变，我必须单击两次才能到达实际的上一页（并且我必须快速单击，否则页面会再次添加到堆栈中）。我将其作为问题进行了隔离，因为当我删除整个 iframe 时，问题就消失了；当我删除 iframe 上的

src

时，它也得到解决。

<iframe sandbox="allow-same-origin allow-scripts" class="add-to-cart__iframe" id="addtocartiframe" src="https://buy.website.com/en/addtocart/#/addToCart/109ATCA714-1003R/71cbba730b634200ac437cc3907ed626/en" title="Add to Cart"></iframe>

我尝试添加

sandbox="allow-same-origin allow-scripts"

基于如何防止Iframe在与浏览器交互后弄乱浏览器的历史记录？但它没有帮助。

我知道我可以删除 src 并仅在单击显示 iframe 的按钮时使用 Javascript 更新 src，但是，如果单击了 iframe 按钮，这仍然会导致后退按钮无法按预期工作，并且客户特别指出这是一个问题（如果他们转到该页面，单击按钮打开 iframe，然后尝试单击返回，它不起作用，这会让他们感到沮丧）

Answer 1

我刚刚在我的应用程序中遇到了一个非常类似的问题。 我决定使用 https://stackoverflow.com/a/32854398/8948645 的建议，使用带有

<object>

属性的

data

标签，而不是带有

<iframe>

属性的

src

标签。 它的工作原理似乎相同，只是它避免了您遇到的浏览器历史记录问题。

我还发现了 https://stackoverflow.com/a/8681618/8948645，建议从 DOM 中删除

<iframe>

元素，修改它，然后将其放回 DOM 中。 我认为这个策略也可以解决我的问题，但我没有尝试，因为

<object>

标签对我来说非常有用。