HTML5历史记录，后退按钮和外部链接

-1

我有一个HTML5应用程序，它操纵浏览器历史记录以显示Ajax调用的正确URL。这很好，但是当我的应用程序超链接到外部网站时会出现问题，例如http://www.google.com。发生这种情况时，历史是这样的：HTML5历史记录，后退按钮和外部链接

我的应用页面A - >我的应用页面乙 - >谷歌

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

但是，当用户第二次点击后退按钮时，URL会更改，但页面不会更改。我的应用程序无法进行适当的Ajax调用来显示My App Page A的状态，因为onpopstate处理程序从未被调用过。这是因为当浏览器返回到我的应用程序页面B时没有初始化处理程序（在该事件中没有事件触发，所以我无法重新初始化处理程序。）

这种体验与Chrome有关，但我没有理由相信它是针对Chrome的。有没有解决这个问题的方法？

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

来源

2012-06-16 davidgyoung

除popstate处理程序外，还应该使用onload处理程序，并且[可能需要某个卸载处理程序]（http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-后退按钮）来中断浏览器缓存。 – user123444555621

我不明白为什么'onpopstate'从来没有被叫过。每次用户更改位置时都应该调用它。 –

@ Pumbaa80提供的链接使我的正确答案追踪。

如果你把<body onunload="">放在你的页面上，那么就是打破了Chrome和其他浏览器上的bfcache。这意味着，当您单击后退按钮从Google返回到我的应用程序页面B时，所有页面状态JavaScript事件都将触发。

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

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

来源

2012-06-24 17:18:06 davidgyoung

我认为你需要使用散列标签来保存页面的状态，我没有看到解决方法。我在过去使用this jQuery plugin取得了巨大的成功，其时尚名称BBQ (Back Button & Query library)。这将允许您的页面根据URL中的哈希标记执行操作。

来源

2012-06-16 19:54:31 ohaal

看起来你不知道HTML5的pushState可以保存状态：https：//developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().C2.A0方法 –

@Derek：这看起来不错，谢谢你的抬头，将来肯定会用到它。不过，我确实看到它的支持还不够理想，缺乏IE9及其以下的交通流量。参考：http：//caniuse.com/#search=pushState - 我的解决方案至少可以作为后备。 – ohaal

HTML5历史记录，后退按钮和外部链接

回答

相关问题