检测浏览器中的后退按钮点击

IT技术 javascript jquery
2021-01-30 00:06:34

我必须检测用户是否点击了后退按钮。为此,我正在使用

window.onbeforeunload = function (e) {
}

如果用户单击后退按钮,它就会起作用。但是如果用户单击 F5 或浏览器的重新加载按钮,也会触发此事件。我该如何解决?

6个回答

所以就 AJAX 而言......

在使用大多数使用 AJAX 导航页面特定部分的网络应用程序时按回是一个巨大的问题。我不接受“必须禁用按钮意味着你做错了什么”,事实上,不同方面的开发人员早就遇到了这个问题。这是我的解决方案:

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;   
            }
        };
    }
}

据我所知,它可以在 chrome、firefox 上运行,还没有测试 IE

这使用了并非所有地方都支持History API你可以添加一个垫片,但你必须稍微改变你的代码。
2021-03-14 00:06:34
1.history.go(-2);如果您只想捕获事件但保留原始后退按钮行为,则应在 window.onpopstate 事件中添加2. 我认为 window.onhashchange 只有在 URL 包含“#”锚点时才会起作用
2021-03-22 00:06:34
我的解决方案有点太简单了,您的链接引用了一个很棒的跨平台解决方案,我相信基于相同的 hashchange 事件。
2021-03-31 00:06:34
你完全正确。我查了一下,我可以让旧的 FF 和 IE 使用这个模型..(上面编辑过)看看这个人的帖子:attributelygood.com/2010/7/Saner-HTML5-History-Management
2021-04-07 00:06:34
如果地址中没有散列(onhashchange 事件永远不会触发),这在 IE9 中将不起作用。在注册事件之前不要忘记添加默认哈希。
2021-04-09 00:06:34

请试试这个(如果浏览器不支持“onbeforeunload”):

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
          alert('Back button was pressed.');
        }
      }
    });

    window.history.pushState('forward', null, './#forward');
  }

});
适用于 Chrome、FF 和 IE11
2021-03-20 00:06:34
如果浏览器没有实现历史 API,@OliverSchafeldwindow.history.pushState仅(或首先)测试可能会抛出Cannot read property 'pushState' of undefined所以这两个测试是需要的,按照这个特定的顺序。
2021-03-25 00:06:34
@Nico Prat:啊,当然,谢谢。测试一个不存在的属性像这样的 !!window.history.madeupproperty结果false所以我猜if(!!window.history.pushState)可能会这样做。无法使用 IE9 ( caniuse.com/#feat=history ) 进行正确测试。但简单地检查!!window.notexistent.madeup会抛出“无法读取属性...”错误。所以if (window.history && window.history.pushState)是真正需要的,也是按照这个顺序。
2021-04-03 00:06:34
非常有用的代码,但是,正如@Portekoi 指出的那样,不要阻止两次后退按钮。为了实现完全阻塞功能,我在一行window.history.pushState('forward', null, './#forward')之后添加了最后alert('...')一行。这做到了……没有刷新或对后退按钮单击有任何明显影响。
2021-04-04 00:06:34
函数window.history.pushState是对象的子/方法window.history仅测试功能还不够吗?
2021-04-05 00:06:34

我知道的最好方法

         window.onbeforeunload = function (e) {
            var e = e || window.event;
            var msg = "Do you really want to leave this page?"

            // For IE and Firefox
            if (e) {
                e.returnValue = msg;
            }

            // For Safari / chrome
            return msg;
         };
这不会禁用后退按钮,因为它会阻止任何浏览(后退、前进、刷新),并允许用户使用您无法控制的提示来停止它。
2021-03-27 00:06:34
这在 chrome 中不起作用。
2021-04-04 00:06:34
这将禁用离开页面的导航 - 包括关闭页面、后退和前进,并且不回答问题。
2021-04-10 00:06:34

我通过这种方式检测后退按钮:

window.onload = function () {
if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}

它可以工作,但我必须在 Chrome 中创建一个 cookie 来检测我第一次在页面中,因为当我在没有 cookie 控制的情况下进入页面时,浏览器会在没有点击任何后退按钮的情况下执行后退动作。

if (typeof history.pushState === "function"){
history.pushState("jibberish", null, null); 
window.onpopstate = function () {
    if ( ((x=usera.indexOf("Chrome"))!=-1) && readCookie('cookieChrome')==null ) 
    {
        addCookie('cookieChrome',1, 1440);      
    } 
    else 
    {
        history.pushState('newjibberish', null, null);  
    }
};

}

非常重要,history.pushState("jibberish", null, null);复制浏览器历史记录。

有人知道我可以修复它吗?

由于后退按钮是浏览器的一项功能,因此很难更改默认功能。不过也有一些变通办法。看看这篇文章:

http://www.irt.org/script/311.htm

通常,需要禁用后退按钮是编程问题/缺陷的一个很好的指标。我会寻找一种替代方法,例如设置会话变量或存储表单是否已提交的 cookie。

如果你做任何现代的事情,后退按钮的默认操作是不合适的。这是因为后退按钮是在 ajax 之前解决 web 不切实际的一种解决方法。
2021-03-29 00:06:34