首页 > 代码库 > history对象

history对象

2024-09-10 22:54:15   217人阅读

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>

 

history对象


联系
我们