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

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

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

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

当前回答

你可以尝试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

其他回答

正在寻找这个问题的解决方案，并根据这里的一些答案和History.pushState()和WindowEventHandlers.onpopstate的MDN Web文档页面，将一个简单的骨架测试html放在一起。

下面的HTML和JavaScript很容易复制、粘贴和测试。

使用后退和前进浏览器按钮，快捷键，添加对URL的更改(这在某些情况下很重要)。

简单到可以向现有代码中添加关键点，并且应该是可扩展的。

<html>
<body>
<div id="p1">Option 1</div>
<div id="p2">Option 2</div>
<div id="p3">Option 3</div>
<div id="p4">Option 4</div>
<div id="c"></div>
<script>
var chg={
    set:function(str){
        var d=document.getElementById("c");
        d.textContent=str;
    },
    go:function(e){
        var s={"p":this.id};
        chg.set(s.p);
        hstry.add(s);
    }
};
var hstry={
    add:function(s){
        var u=new URL(window.location);
        u.searchParams.set("x",s.p);
        window.history.pushState(s,"",u);
    },
    adjust:function(state){
        if(state.p){
            chg.set(state.p);
        }
    }
};
window.onpopstate=function(e){
    console.log("popstate, e.state:["+ JSON.stringify(e.state) +"]");
    hstry.adjust(e.state);
}
window.onload=function(){
    var i,d,a=["p1","p2","p3","p4"];
    for(i=0;i<a.length;i++){
        d=document.getElementById(a[i]);
        d.addEventListener("click",chg.go,false);
    }
}
</script>
</body>
</html>

2022-01-24 11:44:18

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

我能够使用这篇文章中的一些答案和其他人让它在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();
}

2019-03-29 15:53:08

我已经为这个需求挣扎了很长一段时间，并采用了上面的一些解决方案来实现它。然而，我偶然发现，它似乎可以在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
  }
}

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

2017-08-22 11:23:42

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

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

2019-02-28 23:16:14

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

推荐文章

最新文章

标签