1.HTML5 History对象html
支持使用pushState()方法修改地址栏地址,而不刷新页面。浏览器
popstate事件app
当history实体被改变时,popstate事件将会发生。调用pushState()方法或者replaceState()方法是触发,当用户点击浏览器返回按钮时也会触发。post
事件注册实例:url
window.addEventListener('popstate', function (event) { console.info(event); console.info(event.state); console.info(event.state.id); });
2.根据这个事件,若是在触发是从新添加当前页面状态,这样的话用户经过返回按钮就没法离开这个页面了。spa
从而实现返回按钮被锁定的状态code
<div id="number"></div> <script> pushHistory(); var number=0; window.addEventListener("popstate", function (e) { // alert("我监听到了浏览器的返回按钮事件啦"); //根据本身的需求实现本身的功能 number++; var p=document.createElement('p'); p.innerHTML=number; document.getElementById('number').appendChild(p); pushHistory(); //注,此处调用,能够用户一直停留着这个页面 }, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } </script>
更多:htm
HTML5 History对象,Javascript修改地址栏而不刷新页面对象