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

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

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


当前回答

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

这是唯一一个解决方案,为我工作(这不是一个一页网站)。 它支持Chrome、Firefox和Safari浏览器。

其他回答

浏览器会发出popstate事件,如果你通过你的应用程序调用导航

window.history.pushState({},'','/to')

如果您手动在地址栏中输入地址并单击后退按钮,popstate事件将不会被触发。

如果你用这个简化的功能在应用中导航

const navigate = (to) => {
    window.history.pushState({}, ",", to);
  };

这样就可以了

const handlePopstate = () => {
  console.log("popped");
};
window.addEventListener("popstate", handlePopstate);

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

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

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

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

我已经为这个需求挣扎了很长一段时间,并采用了上面的一些解决方案来实现它。然而,我偶然发现,它似乎可以在Chrome、Firefox和Safari浏览器以及Android和iPhone上运行

页面加载:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

如果有帮助请告诉我。如果我错过了什么,我会很高兴去理解。

看到这个:

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

它工作得很好……