window.history.back() 在 iframe 中重新加载 Internet Explorer 中的页面？答案

【问题标题】：window.history.back() reloads the page in Internet Explorer when inside of an iframe?window.history.back() 在 iframe 中重新加载 Internet Explorer 中的页面？
【发布时间】：2012-06-17 22:32:05
【问题描述】：

当我的页面位于 iframe 中时，我注意到 Internet Explorer 的一种奇怪行为。似乎 iframe 在调用 window.history.back() 时会自行重新加载，即使只有 URL 中的哈希值应该改变。当页面不在 iframe 中时，它会正常运行并且不会重新加载页面。知道为什么会发生这种情况以及如何预防吗？

我创建了一个将在 IE9 中演示的小提琴：

http://jsfiddle.net/peh96/5/

jsfiddle 使用 iframe，因此行为将是 iframe 行为。单击“#foo”和“#bar”将更改 URL 中的哈希值。现在单击“返回”链接将触发 window.history.back()。请注意，当您这样做时时间戳会发生变化，表明页面正在重新加载。

或者，如果您直接加载 iframe：

http://fiddle.jshell.net/peh96/5/show/

您会注意到单击“BACK”时时间戳没有改变。

这只是一个 IE 问题，因为无论是否在 iframe 内，Chrome 和 Firefox 都是一致的。

知道如何防止这种重新加载吗？

【问题讨论】：

这个bug我们也很困扰:(
@Blackbird，您选择解决此问题的解决方法是什么？
没有，很遗憾 :( 你呢？
还没有。我正在考虑建立自己的历史堆栈并使用它而不是 window.history.back()。这有点难看，但我不知道 IE 有什么办法。
我也有同样的问题，似乎出现在 IE > 8

标签： internet-explorer iframe back browser-history

【解决方案1】：

好吧，当我从上下文菜单中选择 Back 命令时，它也是如此。在 IE10 中你可以使用HTML5 State Management。恐怕在 IE9 中您必须跟踪哈希历史，然后像这样更改它：

document.getElementById('back').addEventListener('click', function () {
    window.location.hash = 'abc';
}, false);

编辑

那么这个呢？当您调用javascript:window.top.location.hash='bar' 时，您可以在父窗口中捕获onhashchange 事件，然后在iframe 中调用scrollTo。但这仅适用于同一域。

【讨论】：

谢谢瓦茨拉夫。但我相信这会在历史堆栈中添加另一个状态，对吗？因此，虽然它会起作用，但它会破坏后退/前进状态。
确实如此。我会尝试找出另一种解决方案。
我有点困惑，但看起来jsfiddle.net/peh96/5 显示了怪癖模式下的示例，这可能会导致浏览器历史记录忽略 # 链接。当我打开fiddle.jshell.net/peh96/5/show 时，它按预期工作。当然，您必须更新onhashchange 发生的时间。检查我的代码：jsfiddle.net/ZGqHF/show
嗨 Václav，您可能误读了我的问题。在 iframe 内部时会出现问题。一旦您将窗口移到 iframe 之外（这就是您正在做的事情），IE 就会正常运行。在 iframe 中“返回”时，我需要一种防止页面加载的解决方案。
哦，我的错，对不起。我使用 IE10，它在那里工作。在 IE9 中，它的行为与您描述的一样。我原本以为问题出在其他地方。看起来这是 IE9 及更早版本中的错误。