监听浏览器回退事件

最新推荐文章于 2024-03-22 21:53:54 发布

xuanwuziyou

最新推荐文章于 2024-03-22 21:53:54 发布

阅读量3.9k

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/76204683

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

Dom:

<body>
  <a id="foo" style="display:none"></a><a href="#foo" id="goFoo" style="display:none"></a>
  <script src="../jquery-1.10.2.min.js"></script>
</body>

Js:

window.οnlοad=function(){
   addHistoryEntity();
   detectBack();
}
//新增一条浏览器浏览历史记录
function addHistoryEntity(){
    if(history.pushState){ //现代浏览器
        history.pushState('state1',null,'#foo');
    }else{                 //ie9及以下
        document.getElementById("goFoo").click();
    }
}
//监听浏览器回退按钮
function detectBack(){
    if(history.pushState){ //现代浏览器
        window.onpopstate=function(){
            logout();
        }
    }
    else{                  //ie9及以下
        $(window).on("hashchange",function(){
            if(location.hash=="#foo"){
                return;
            }
            logout();
        });
    }
}
//回退前事件
function logout(){
    alert("此时调用logout");
    history.back();
}
history.pushState方法（还有history.replaceState方法）是html5中新定义的特性，ie浏览器从ie10开始支持.

xuanwuziyou

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
监听浏览器回退事件

Dom: Js:window.onload=function(){ addHistoryEntity(); detectBack();}//新增一条浏览器浏览历史记录function addHistoryEntity(){ if(history.pushState){ //现代浏览器 history.pushState('s
复制链接

扫一扫