javascript – 在我的AJAX应用程序中拦截对后退按钮的调用

2019-09-15 21:44:21 阅读：251 来源： 互联网

标签：javascript ajax browser-history cross-browser

我有一个AJAX应用程序.用户单击按钮,页面的显示会发生变化.他们点击后退按钮,期望进入原始状态,但是,他们会在浏览器中转到上一页.

如何拦截和重新分配后退按钮事件？我已经研究过像RSH这样的库(我无法工作……),我听说使用哈希标签会有所帮助,但我无法理解它.

解决方法:

啊,后退按钮.您可能会想象“返回”会触发一个JavaScript事件,您可以像这样简单地取消：

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

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

如果你真的有一个网络应用程序(而不仅仅是一个具有一些ajaxy功能的网站),接管后退按钮是合理的(如你所述,URL上有片段). Gmail就是这么做的.我在谈论你的网页应用程序在一个页面中的所有内容,都是自包含的.

该技术很简单 – 每当用户采取修改事物的操作时,重定向到您已经使用的相同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);

标签：javascript,ajax,browser-history,cross-browser
来源： https://codeday.me/bug/20190915/1806185.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 在我的AJAX应用程序中拦截对后退按钮的调用