Code
2024-02-05 10:00:05

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

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

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

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

当前回答

正在寻找这个问题的解决方案，并根据这里的一些答案和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

其他回答

在javascript中，导航类型2意味着浏览器的后退或前进按钮被点击，浏览器实际上是从缓存中获取内容。

if(performance.navigation.type == 2)
{
    //Do your code here
}
2018-10-16 09:59:41

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

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

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

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

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

这样就可以了

const handlePopstate = () => {
  console.log("popped");
};
window.addEventListener("popstate", handlePopstate);
2022-12-23 23:31:03

(注:根据Sharky的反馈，我已经包含了检测退格的代码)

所以，我经常在So上看到这些问题，最近我自己也遇到了控制后退按钮功能的问题。在为我的应用程序(带散列导航的单页)搜索了几天之后，我想出了一个简单的、跨浏览器的、少库的检测后退按钮的系统。

大多数人建议使用:

window.onhashchange = function() {
 //blah blah blah
}

但是，当用户使用页面内元素更改位置散列时，也将调用此函数。当用户单击页面时，页面向后或向前移动，这不是最好的用户体验。

为了让您大致了解我的系统，当用户在界面中移动时，我将用以前的哈希值填充一个数组。它看起来是这样的:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

非常直截了当。我这样做是为了确保跨浏览器支持，以及对旧浏览器的支持。只需将新的散列传递给函数，它就会为您存储它，然后更改散列(然后将其放入浏览器的历史记录中)。

我还利用了一个页面内返回按钮，使用lasthash数组在页面之间移动用户。它是这样的:

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

所以这将移动用户回到最后的哈希，并从数组中删除最后的哈希(我现在没有前进按钮)。

所以。如何检测用户是否使用了页面内的后退按钮或浏览器按钮?

起初我看着窗户。Onbeforeunload，但是没有用——只有当用户要更改页面时才会调用它。这在使用散列导航的单页应用程序中不会发生。

因此，在深入研究之后，我看到了尝试设置标志变量的建议。在我的情况下，这个问题是，我会试着设置它，但由于一切都是异步的，它并不总是在哈希中的if语句更改时设置。onmousedown并不总是在点击中调用，并将其添加到onclick中不会足够快地触发它。

这时我开始研究文档和窗口之间的区别。我的最终解决方案是使用文档设置标志。Onmouseover，并使用document.onmouseleave禁用它。

发生的情况是，当用户的鼠标在文档区域内(读取:呈现的页面，但不包括浏览器框架)，我的布尔值被设置为true。一旦鼠标离开文档区域，布尔值就会变为false。

这样，我就可以换窗口了。onhashchange:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

您将注意到#undefined的检查。这是因为如果我的数组中没有可用的历史记录，它将返回undefined。我使用它来询问用户是否想要使用窗口离开。onbeforeunload事件。

所以，简而言之，对于那些不需要使用页面内返回按钮或数组来存储历史的人:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

结果出来了。关于哈希导航，一种简单的、由三部分组成的方法来检测后退按钮的使用情况与页面内元素的使用情况。

编辑:

为了确保用户不会使用backspace来触发back事件，你还可以包括以下内容(感谢@thetoolman在这个问题上的回答):

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});
2014-09-12 10:50:50

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

$(window).on('popstate', function(event) {
 alert("pop");
});
2019-02-28 23:16:14

浏览器: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

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1