我有一个AJAX应用。用户单击一个按钮,页面的显示就会更改。他们单击“后退”按钮,希望进入原始状态,但是,却转到浏览器中的上一页。
如何截取并重新分配后退按钮事件?我已经研究过RSH之类的库(我无法使用…),而且我听说使用井号在某种程度上有所帮助,但我无法理解。
啊,后退按钮。您可能想象“后退”会触发一个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);