HTML5历史记录，后退按钮和外部链接
[英]HTML5 History, Back Button and external links
问题描述
我有一个HTML5应用程序，它操纵浏览器历史记录以显示Ajax调用的正确URL。 这很好用，但是当我的应用程序具有指向外部网站的超链接时会出现问题，例如http://www.google.com 。 发生这种情况时，历史记录如下：
我的应用页面A - >我的应用页面B - > Google
当用户点击后退按钮一次时，一切都很好。 我的应用页面B显示。
但是当用户第二次点击后退按钮时，URL会发生变化，但页面不会更改。 我的应用程序无法进行正确的Ajax调用以显示My App Page A的状态，因为onpopstate处理程序从未被调用过。 这是因为当浏览器返回到我的应用页面B时没有初始化处理程序（没有事件触发该返回事件，因此我无法重新初始化处理程序。）
这种体验适用于Chrome，但我没有理由相信它是针对Chrome的。 有没有解决这个问题的方法？
我知道像Gmail这样的应用程序会在新窗口中打开所有外部超链接。 但是我的申请要求不允许我这样做。
2 个解决方案
解决方案1
2 已采纳 2012-06-24 17:18:06
@ Pumbaa80提供的链接让我找到正确的答案。
如果您在页面上放置<body onunload=""> ，则会破坏Chrome和其他浏览器上的bfcache。 这意味着当您单击后退按钮从Google返回我的应用页面B时，将触发所有页面状态JavaScript事件。
从谷歌回来后，没有办法在我的应用页面B上调用onpopstate。 （这个不合逻辑，因为该事件只会在您点击后退按钮的页面上触发。）
另一种方法是在My App Page B加载时执行逻辑。 通过如上所述打破bfcache，jQuery dom ready将会触发。 通过在jQuery dom ready回调中运行onpopstate中的类似代码，我可以访问存储在History对象中的数据，从外部页面返回后重置HTML5 Web应用程序的状态。
解决方案2
0 2012-06-16 19:54:31
我认为你需要使用哈希标签来保存你的页面状态，我没有看到解决方法。 我在过去使用这个jQuery插件取得了巨大的成功，使用非常时髦的名称BBQ（后退按钮和查询库） 。 这将允许您的页面根据URL中的哈希标记执行操作。
如何在 HTML5 中添加自定义历史记录以防止 android 后退按钮在cordova 应用程序中显示前一个视图？
[英]How to add custom history in HTML5 to prevent android back button to display just previous view in cordova application?
Ajax / HTML5历史状态（popState，pushState等）-后退按钮行为
[英]Ajax / HTML5 history states (popState, pushState, etc) - back button behavior
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.