拦截调用的返回按钮，在我的AJAX应用程序：我不想做任何事情！ [英] Intercepting call to the back button in my AJAX application: I don't want it to do anything!

问题描述

我有一个AJAX应用程序。用户点击一个按钮，页面的显示变化。他们点击后退按钮，预计要到原来的状态，而是，他们到了previous页面在浏览器中。

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.

如果你确实有一个的 Web应用程序的（而不仅仅是一个网站与一些ajaxy功能）是合理的接管后退按钮（带片段上的网址，你提到） 。 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.

工艺简单＆mdash;每当用户采取行动改变的事情，重定向到你已经在同一个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";

如果你的Web应用程序的整体状态是哈希，这是一个伟大的地方使用哈希。假设你有邮件列表时，也许你会串联所有的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...)

这是的code中的要点。 （这也是如何jQuery的历史插件工作。）

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