在我的AJAX应用程序中拦截对后退按钮的调用：我不希望它做任何事情 [英] Intercepting call to the back button in my AJAX application: I don't want it to do anything

问题描述

我有一个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就是这么做的。我在谈论你的网页应用程序在一个页面中的所有内容，都是自包含的。

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屋！