一尘不染

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

javascript

我有一个AJAX应用。用户单击一个按钮,页面的显示就会更改。他们单击“后退”按钮,希望进入原始状态,但是,却转到浏览器中的上一页。

如何截取并重新分配后退按钮事件?我已经研究过RSH之类的库(我无法使用…),而且我听说使用井号在某种程度上有所帮助,但我无法理解。


阅读 195

收藏
2020-05-01

共1个答案

一尘不染

啊,后退按钮。您可能想象“后退”会触发一个JavaScript事件,您可以像这样简单地将其取消:

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

不对 根本没有这样的事件。

如果您确实有一个 Web应用程序
(而不只是一个具有某些ajaxy功能的网站),那么接管后退按钮(如您提到的,URL上的片段)是合理的。Gmail会这样做。我说的是什么时候您的Web应用程序在一个页面中完全独立。

该技术很简单-每当用户执行修改操作时,都将重定向到您已经使用的相同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);
2020-05-01