为什么加载 iframe 时 Safari 中不触发 popstate？

Question

在 Safari 中，如果存在 iframe 加载，并且用户通过后退或前进更改历史记录状态，则不会触发 popstate 事件，从而导致应用程序状态和窗口位置不同步。

我认为活跃的 XHR 请求会导致相同的行为，但我还无法确认这一点。

这是一个 jsfiddle，可以让您轻松重现该问题： http://jsfiddle.net/neonsilk/muHk8/

您只需单击中的链接/按钮顺序，从 1 到 6。

在 Safari 5.0.5 中，输出为：（

按时间倒序，重要部分是顶部的状态比较）

[1305665493096] /
[1305665493096] vs
[1305665493096] /node
---------------
[1305665489955] iframe loaded
---------------
[1305665489806] (did popstate or $.address change trigger?)
[1305665489805] called history.back()
[1305665489805] appended iframe
---------------
[1305665488428] popstate: /node
[1305665488427] $.address change: /node
---------------
[1305665487821] popstate: /
[1305665487821] $.address change: /
---------------
[1305665487179] $.address change: /node
---------------
[1305665486606] $.address change: /
---------------
[1305665485732] iframe loaded
---------------
[1305665485569] $.address change: /neonsilk/muHk8/show/
[1305665485568] $.address init

然而在 Chrome (11) 或 FireFox 中(4.0)，输出如下所示：（

请注意，状态是同步的）

[1305665609499] /
[1305665609499] vs
[1305665609499] /
---------------
[1305665608360] iframe loaded
---------------
[1305665607770] popstate: /
[1305665607770] $.address change: /
[1305665607758] (did popstate or $.address change trigger?)
[1305665607758] called history.back()
[1305665607758] appended iframe
---------------
[1305665606870] popstate: /node
[1305665606869] $.address change: /node
---------------
[1305665606150] popstate: /
[1305665606149] $.address change: /
---------------
[1305665605551] $.address change: /node
---------------
[1305665604808] $.address change: /
---------------
[1305665603354] iframe loaded
---------------
[1305665602688] $.address change: /neonsilk/muHk8/show/
[1305665602682] $.address init
[1305665602676] popstate: /neonsilk/muHk8/show/

这是 Safari 中的错误吗？如果是的话，有人发现了解决方法吗？

（同样有趣的是，FireFox 和 Chrome 都会在页面加载时触发 popstate 事件。）

Answer 1

更新

据我所知，这个错误是首先由 Ben Cherry 报告的< /a>.

这是相应的错误报告和变更集。

以及来自 Chromium 的问题。

我一直无法弄清楚 Chrome 中的错误何时被修复。如果其他人有，我将非常感激这些信息。

我确实知道该错误存在于 WebKit 533.21.1（Safari 5.0.5 使用的）中，并且已被 534.36（Safari/WebKit nightly）修复——但我不知道，也无法解决找出哪个中间版本引入了修复程序。

有一个一个有用的图表，将 Chrome 版本映射到其 WebKit 版本。

最重要，当存在任何活动网络流量（图像加载、Ajax 请求等）而不仅仅是 iframe 时，此错误显然会发生。如果您正在尝试实现 History API 支持，或者您正在使用最新版本的 Asual 的 jQuery 地址插件（默认情况下启用历史记录支持），此错误可能会严重影响您的应用程序。

---

第二次更新

我想我找到了引入修复程序的确切 WebKit 版本 (534.10)。所以，如果您正在使用 jQuery 和 Asual 的 Address 插件，这里是实用的解决方案：

if (!($.browser.webkit === true && parseFloat($.browser.version) < 534.10)) {
    // only enable state support if WebKit version >= 534.10
    $.address.state("/base/path");
}

我希望这对某人有帮助！

---

我刚刚在最新的 WebKit nightly (r86671) 中测试了 fiddle，并且状态保持同步，所以它一定是一个错误。有趣的是，花费大量时间写下问题并立即提交会激发答案。

尽管如此，如果有人有解决方法，我们将不胜感激。

WebKit nightly (r86671)：

[1305666598481] /
[1305666598481] vs
[1305666598480] /
---------------
[1305666597469] iframe loaded
---------------
[1305666597300] popstate: /
[1305666597298] $.address change: /
[1305666597270] (did popstate or $.address change trigger?)
[1305666597269] called history.back()
[1305666597269] appended iframe
---------------
[1305666596605] popstate: /node
[1305666596605] $.address change: /node
---------------
[1305666596008] popstate: /
[1305666596008] $.address change: /
---------------
[1305666595555] $.address change: /node
---------------
[1305666595142] $.address change: /
---------------
[1305666578600] iframe loaded
---------------
[1305666578400] $.address change: /_display/
[1305666578400] $.address init
---------------
[1305666577964] popstate: /_display/

同样有趣的是，Safari 现在与 Chrome 和 FireFox 的行为相匹配，在页面加载时触发 popstate。

Answer 2

1. Img/script/iframe 加载会破坏 popstate，但 XHR 不受此错误影响！
2. 文档加载之前的后退/前进将会延迟。加载时我们将得到一个 popstate。 （即使有多个后退/前进，也只会弹出最后一个状态。）

（在 Android 2.2 和 iOS 4.3.3 上的 Safari 下测试）

因此解决方法是：

使用 XHR 而不是 img 来跟踪/预加载加载事件后的任何内容。

如果用户在加载事件之前执行后退/前进两次或更多次，我们可能仍然会遇到问题，但是如果加载时间很短，用户很少会执行多个操作，并且因为最终状态是正确的，所以我认为这是可以的。

另一个解决方法是：

使用计时器监视 url，如果在没有 popstate 的情况下更改了 url，请自行完成脏工作。 （正如这个bug的评论，Facebook曾经使用过这个解决方案。）

但是这个方法太复杂了，因为你应该将状态序列化/反序列化为url或localstorage/sessionstorage，就像你没有History API一样。所以我认为这不是一个可以接受的解决方法。