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

我有一个AJAX应用程序.用户单击按钮,页面的显示会发生变化.他们点击后退按钮,期望进入原始状态,但是,他们会在浏览器中转到上一页.

如何拦截和重新分配后退按钮事件？我已经研究过像RSH这样的库(我无法工作……),我听说使用哈希标签会有所帮助,但我无法理解它.

@H_404_4@解决方法:

啊,后退按钮.您可能会想象“返回”会触发一个JavaScript事件,您可以像这样简单地取消：

document.onHistoryGo = function() { return false; }

不是的.根本没有这样的事件.

如果你真的有一个网络应用程序(而不仅仅是一个具有一些ajaxy功能的网站),接管后退按钮是合理的(如你所述,URL上有片段). Gmail就是这么做的.我在谈论你的网页应用程序在一个页面中的所有内容,都是自包含的.

该技术很简单 – 每当用户采取修改事物的操作时,重定向到您已经使用的相同URL,但使用不同的哈希片段.例如.

window.location.hash = "#deleted_something";
...
window.location.hash = "#did_something_else";

如果您的Web应用程序的整体状态是可清除的,那么这是一个使用哈希的好地方.假设您有一个电子邮件列表,也许您将连接所有ID和读/未读状态,并使用MD5哈希作为您的片段标识符.

这种重定向(仅限哈希)不会尝试从服务器获取任何内容,但它会在浏览器的历史列表中插入一个插槽.因此,在上面的示例中,用户点击“返回”,他们现在在地址栏中显示#deleted_something.他们再次回击,他们仍然在你的页面上,但没有哈希.然后再回来,他们实际上回到了他们来自哪里.

现在是困难的部分,当用户回击时让你的JavaScript被检测到(所以你可以恢复状态).您只需观察窗口位置并查看其何时发生变化.随着民意调查. (我知道,哎呀,民意调查.好吧,现在没有更好的跨浏览器了).您将无法判断他们是前进还是后退,因此您必须使用您的哈希标识符获得创意. (也许是与序列号连接的哈希…)

这是代码的要点. (这也是jQuery History插件的工作原理.)

var hash = window.location.hash;
setInterval(function(){
    if (window.location.hash != hash) {
        hash = window.location.hash;
        alert("User went back or forward to application state represented by " + hash);
    }
}, 100);