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

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

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


当前回答

我能够使用这篇文章中的一些答案和其他人让它在IE和Chrome/Edge中工作。历史。IE11中不支持pushState。

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}

其他回答

我能够使用这篇文章中的一些答案和其他人让它在IE和Chrome/Edge中工作。历史。IE11中不支持pushState。

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}

我的版本:

const inFromBack = performance && performance.getEntriesByType( 'navigation' ).map( nav => nav.type ).includes( 'back_forward' )

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

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

我通过跟踪触发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)
}

这将肯定工作(用于检测返回按钮点击)

$(window).on('popstate', function(event) {
 alert("pop");
});