在我的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.

谢谢！

推荐答案

啊，你可以想象back触发一个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.

这个技术很简单。每当用户采取操作修改的事情，重定向到您已经在同一个网址，但使用不同的散列片段。例如

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

如果你的web应用程序的整体状态是hashable，这是一个很好的地方使用哈希。假设您有电子邮件列表，也许您会连接所有的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检测当用户回击（所以你可以回复状态）。你所做的就是观察窗口的位置，看看它的变化。使用轮询。 （我知道，yuck，轮询，嗯，现在没有什么更好的跨浏览器）。你不能知道他们是前进还是后退，所以你必须要有创意与你的哈希标识符。 （也许一个哈希与序列号连接...）

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