如何检测浏览器后退按钮事件-跨浏览器

您如何确定地检测用户是否在浏览器中按下了后退按钮?

如何使用#URL系统在单页web应用程序中强制使用页面内返回按钮?

为什么浏览器的后退按钮不触发它们自己的事件!?

当前回答

我通过跟踪触发hashchange的原始事件(无论是滑动、单击还是滚动)来解决这个问题，这样事件就不会被误认为是简单的页面登陆，并在每个事件绑定中使用一个额外的标志。当点击后退按钮时，浏览器不会再次将标志设置为false:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

2018-04-14 16:48:35

其他回答

浏览器:https://jsfiddle.net/Limitlessisa/axt1Lqoz/

移动控制:https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() { $('body').on('click touch', '#share', function(e) { $('.share').fadeIn(); }); }); // geri butonunu yakalama window.onhashchange = function(e) { var oldURL = e.oldURL.split('#')[1]; var newURL = e.newURL.split('#')[1]; if (oldURL == 'share') { $('.share').fadeOut(); e.preventDefault(); return false; } //console.log('old:'+oldURL+' new:'+newURL); } .share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px; <!DOCTYPE html> <html> <head> <title>Back Button Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body style="text-align:center; padding:0;"> <a href="#share" id="share">Share</a> <div class="share" style=""> <h1>Test Page</h1> <p> Back button press please for control.</p> </div> </body> </html>

2016-10-19 15:38:03

你可以尝试popstate事件处理程序，例如:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

注意:为了获得最佳结果，您应该只在希望实现逻辑的特定页面上加载此代码，以避免任何其他意外问题。

每当当前历史记录项更改(用户导航到新状态)时，就会触发popstate事件。当用户单击浏览器的后退/前进按钮时，或者当以编程方式调用history.back()、history.forward()、history.go()方法时，就会发生这种情况。

该事件。状态是事件的属性，等于历史状态对象。

对于jQuery语法，将它环绕起来(在文档准备好后添加监听器):

(function($) {
  // Above code here.
})(jQuery);

参见:window。Onpopstate页面加载

参见单页应用程序和HTML5 pushState页面的示例:

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

这应该与Chrome 5+， Firefox 4+， IE 10+， Safari 6+， Opera 11.5+和类似的兼容。

2016-05-09 11:50:59

以下是我的看法。假设是，当URL更改但检测到文档内没有单击时，它是浏览器返回(是的，或向前)。用户点击2秒后重置，使其在通过Ajax加载内容的页面上工作:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);

2017-02-17 10:37:50

我尝试了上面的方法，但是没有一个对我有效。这是解决方案

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

详情请参考http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli

2016-05-12 12:40:47

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

2018-04-14 16:48:35

如何检测浏览器后退按钮事件-跨浏览器

推荐文章

最新文章

标签