HTML5 历史、后退按钮和外部链接答案

【问题标题】：HTML5 History, Back Button and external linksHTML5 历史、后退按钮和外部链接
【发布时间】：2012-06-16 19:50:38
【问题描述】：

我有一个 HTML5 应用程序，它处理浏览器历史记录以显示 Ajax 调用的正确 URL。这很好用，但是当我的应用程序具有指向外部站点的超链接时会出现问题，例如http://www.google.com。发生这种情况时，历史记录如下所示：

我的应用页面 A -> 我的应用页面 B -> Google

当用户点击一次后退按钮时，一切都很好。显示了我的应用页面 B。

但是当用户第二次点击返回按钮时，URL 会改变，但页面不会改变。我的应用程序无法进行正确的 Ajax 调用来显示我的应用程序页面 A 的状态，因为从未调用过 onpopstate 处理程序。这是因为当浏览器返回“我的应用页面 B”时，处理程序未初始化（该返回事件没有触发任何事件，因此我无法重新初始化处理程序。）

这种体验适用于 Chrome，但我没有理由相信它是 Chrome 特有的。有没有办法解决这个问题？

我知道 Gmail 等应用程序会在新窗口中打开所有外部超链接。但是我的应用程序的要求不允许我这样做。

【问题讨论】：

除了 popstate 处理程序之外，您还应该使用 onload 处理程序，并且您 may need some unload handler 会破坏浏览器缓存。
我不明白为什么onpopstate 从来没有接到电话。每次用户更改位置时都应该调用它。

标签： javascript ajax html external history

【解决方案1】：

@Pumbaa80 提供的链接让我找到了正确答案。

如果您将<body onunload=""> 放在页面上，则会破坏 Chrome 和其他浏览器上的 bfcache。这意味着当您单击返回按钮从 Google 返回到“我的应用页面 B”时，所有页面状态 JavaScript 事件都会触发。

从 Google 返回后，无法在“我的应用页面 B”上调用 onpopstate。（这不合逻辑，因为该事件仅在您点击后退按钮的页面上触发。）

另一种方法是在加载我的应用页面 B 时执行逻辑。通过如上所述破坏 bfcache，jQuery dom ready 将触发。通过在 jQuery dom 就绪回调中运行来自 onpopstate 的类似代码，我可以访问存储在 History 对象中的数据，从而在从外部页面返回后重置我的 HTML5 Web 应用程序的状态。

【讨论】：

【解决方案2】：

我认为您需要使用井号标签来保存页面的状态，我看不出有什么办法。过去我使用this jQuery plugin 取得了巨大成功，并使用了非常时尚的名称BBQ (Back Button & Query library)。这将允许您的页面根据 URL 中的哈希标签执行操作。

【讨论】：

貌似你不知道HTML5的pushState可以保存状态：developer.mozilla.org/en/DOM/…
@Derek：看起来很棒，感谢您的提醒，将来肯定会使用它。然而，我确实看到对它的支持还不是最佳的，缺少 IE9 及以下版本会导致大量流量。参考：caniuse.com/#search=pushState - 我的解决方案至少可以作为后备。