监听浏览器回退事件

来源:互联网 发布:淘宝文案策划岗位职责 编辑:程序博客网 时间:2024/05/16 01:18

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.onload=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开始支持.

原创粉丝点击