在我的 AJAX 应用程序中拦截对后退按钮的调用 [英] Intercepting call to the back button in my AJAX application

问题描述

我有一个 AJAX 应用程序.用户单击一个按钮，页面的显示就会发生变化.他们单击后退按钮，希望回到原始状态，但他们却转到浏览器中的上一页.

I have an AJAX app. A user clicks a button, and the page's display changes. They click the back button, expecting to go to the original state, but instead, they go to the previous page in their browser.

如何拦截并重新分配后退按钮事件?我研究过像 RSH 这样的库(我无法开始工作......)，我听说使用哈希标签在某种程度上有帮助，但我无法理解.

How can I intercept and re-assign the back button event? I've looked into libraries like RSH (which I couldn't get to work...), and I've heard that using the hash tag somehow helps, but I can't make sense of it.

推荐答案

啊，后退按钮.您可能会想象返回"会触发一个 JavaScript 事件，您可以像这样简单地取消该事件:

Ah, the back button. You might imagine "back" fires a JavaScript event which you could simply cancel like so:

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

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

No so. There simply is no such event.

如果你真的有一个网络应用(而不是只是一个带有一些ajaxy功能的网站)，接管后退按钮是合理的(如你所提到的，URL上有片段).Gmail 就是这样做的.我指的是当您的 Web 应用程序全部集中在一个页面中时，所有内容都是独立的.

If you really do have a web app (as opposed to just a web site with some ajaxy features) it's reasonable to take over the back button (with fragments on the URL, as you mention). Gmail does this. I'm talking about when your web app in all in one page, all self-contained.

技术很简单—每当用户采取修改内容的操作时，重定向到您已经访问的相同 URL，但具有不同的哈希片段.例如

The technique is simple — whenever the user takes action that modifies things, redirect to the same URL you're already on, but with a different hash fragment. E.g.

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

如果您的网络应用程序的整体状态是可散列的，那么这是使用散列的好地方.假设您有一个电子邮件列表，也许您可​​以将它们的所有 ID 和已读/未读状态连接起来，然后使用 MD5 哈希值作为片段标识符.

If the overall state of your web app is hashable, this is a great place to use a hash. Say you have a list of emails, maybe you'd concatenate all their IDs and read/unread statuses, and take an MD5 hash, using that as your fragment identifier.

这种重定向(仅哈希)不会尝试从服务器获取任何内容，但会在浏览器的历史记录列表中插入一个插槽.所以在上面的例子中，用户点击返回"，他们现在在地址栏中显示 #deleted_something.他们再次回击，他们仍在您的页面上，但没有哈希值.然后再回来，他们实际上会回到他们来自哪里的地方.

This kind of redirect (hash only) doesn't try to fetch anything from the server, but it does insert a slot in the browser's history list. So in the example above, user hits "back" and they're now showing #deleted_something in the address bar. They hit back again and they're still on your page but with no hash. Then back again and they actually go back, to wherever they came from.

现在是困难的部分，让您的 JavaScript 检测用户何时回击(以便您可以恢复状态).您所做的就是观察窗口位置并查看它何时发生变化.随着投票.(我知道，糟糕，轮询.嗯，现在没有比这更好的跨浏览器了).但是，您将无法判断它们是前进还是后退，因此您必须对散列标识符发挥创意.(也许是一个与序列号连接的哈希......)

Now the hard part though, having your JavaScript detect when the user hit back (so you can revert state). All you do is watch the window location and see when it changes. With polling. (I know, yuck, polling. Well, there's nothing better cross-browser right now). You won't be able to tell if they went forward or back though, so you'll have to get creative with your hash identifiers. (Perhaps a hash concatenated with a sequence number...)

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

This is the gist of the code. (This is also how the jQuery History plugin works.)

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);

这篇关于在我的 AJAX 应用程序中拦截对后退按钮的调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！