Question

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

window.onbeforeunload = function (e) {
}

如果用户点击后退按钮，它会起作用。但是，如果用户单击F5，也会触发此事件或重新加载浏览器的按钮。我该如何解决这个问题？

Answer 1

就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~~ 。

Answer 2

请尝试此操作（如果浏览器不支持“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');
  }

});

Answer 3

我知道的最佳方式

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

Answer 4

我正在通过这种方式检测后退按钮：

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);重复浏览器历史记录。

有人知道我能解决谁？

Answer 5

由于后退按钮是浏览器的功能，因此可能很难更改默认功能。虽然有一些工作。看看这篇文章：

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

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

Answer 6

我假设您正在尝试处理Ajax导航而不是试图阻止您的用户使用后退按钮，这几乎违反了UI开发的每一个原则。

以下是一些可能的解决方案： JQuery History Salajax A Better Ajax Back Button

在浏览器中检测后退按钮

6 个答案: