javascript 检测浏览器中的后退按钮点击[重复]

jobtbby3 于 2023-03-16 发布在 Java

关注(0)|答案(6)|浏览(775)

此问题在此处已有答案：

Intercepting call to the back button in my AJAX application（12个答案）
八年前就关门了。
我必须检测用户是否点击了后退按钮。为此我使用

window.onbeforeunload = function (e) {
}

如果用户单击后退按钮，则此事件有效。但如果用户单击F5或浏览器的重新加载按钮，则也会触发此事件。如何解决此问题？

JavaScript

来源：https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser

6条答案

按热度按时间

ldfqzlk81#

所以就 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 Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}

据我所知，这在Chrome和Firefox上都有效。

赞(0）回复(0）举报 2023-03-16

7qhs6swi2#

如果您的浏览器不支持跳转，请尝试以下操作：

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

});

赞(0）回复(0）举报 2023-03-16

aiazj4mn3#

我知道的最好的方法是：

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

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

    // For Safari / Chrome
    return msg;
};

赞(0）回复(0）举报 2023-03-16

jm81lzqq4#

我是这样检测后退按钮的：

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