h5新增的history的某部分方法和属性，非常实用。
有pushState,replaceSate,popSate,state
它们详细请看传送门。
测试请开本地服务器。
1、达成某个条件返回指定页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> <style> body,html{ width: 100%; height: 100%; background: rbga(0,0,0,.3); } </style> <script> function pushHistory(){ var state={title:"4.html",url:"./4.html"}; window.history.replaceState(state,'title',"./4.html");
//替换当前路径，但不显示当前路径的东西，不过替换掉当前路径的历史记录 } window.onload=function(){ var abc=document.querySelector("#abc"); abc.onclick=function(){ pushHistory(); } } </script> </head> <body> <h1>我是页面2</h1> <a href="./3.html">33333</a> <a id="abc" href="./3-1.html">4444</a> </body> </html>
2、监听到返回按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2</title> <style> body,html{ width: 100%; height: 100%; background: rbga(0,0,0,.3); } </style> <script> pushHistory(); window.addEventListener("popstate",function(ev){
/*写所想写的代码*/
//在popstate事件完成后可以获取到state对象 var a=window.history.state; pushHistory(); }); function pushHistory(){ var state={title:"4.html",url:"./4.html"}; //先要创建一个新的history实体，然后在改变它时会被popstate监听到，并阻止，这第三个参数是个很神奇的参数(url)(空时可以阻止返回按钮) window.history.pushState(state,'',""); } </script> </head> <body> <h1>我是页面2</h1> <a href="./3.html">33333</a> <a id="abc" href="./3-1.html">4444</a> </body> </html>