在我的AJAX应用程序中拦截对“后退”按钮的调用

Question

我有一个AJAX应用。用户单击一个按钮，页面的显示就会改变。他们单击“后退”按钮，希望进入原始状态，但转到浏览器中的上一页。如何截取并重新分配后退按钮事件？我已经研究过RSH之类的库（我无法使用...），并且听说使用hash标签在某种程度上有所帮助，但我无法理解。

Answer 1

要对一个古老（但很受欢迎）的问题给出最新答案：

HTML5引入了history.pushState()和history.replaceState()方法，分别允许您添加和修改历史记录条目。这些方法与window.onpopstate事件结合使用。

使用history.pushState()更改XMLHttpRequest在状态更改后创建的对象的HTTP标头中使用的引荐来源网址。引荐来源网址是文档的URL，该文档的窗口this位于创建XMLHttpRequest对象时。

Answer 2

使用jQuery，我做了一个简单的解决方案：

$(window).on('hashchange', function() {

    top.location = '#main';

    // Eventually alert the user describing what happened

});

到目前为止，虽然仅在谷歌浏览器中进行了测试。

这解决了我的Web应用程序的问题，该应用程序也高度基于AJAX。

也许有点hack-ish，但我称其为优雅的hacking ；-)每当您尝试向后导航时，它都会在URI中弹出一个哈希部分，从技术上讲，它就是试图向后导航的内容。

它拦截了单击浏览器按钮和鼠标按钮的行为。而且您不能通过每秒单击几次来向后强行破解它，这是在基于setTimeout或setInterval的解决方案中会出现的问题。