html5访问历史记录案列

最新推荐文章于 2022-05-16 17:15:58 发布

_猫力Molly_

最新推荐文章于 2022-05-16 17:15:58 发布

阅读量3.6k

点赞数

分类专栏： html 文章标签： html5 ajax 历史 url

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/mollyGO/article/details/78324449

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天我们来讲一下html5如何“伪造”浏览器的访问记录。实现无刷新改变浏览器url地址！前进and后退，我不停歇！（李时珍的皮）

假设有这样一个场景：一个页面用来显示一系列服装列表，为了分为别类！我们需要一个分类导航，每当我们点击导航链接的时候，通过ajax加载具体服饰列表内容，而页面的某些部分不需要变化。传统的做法是给每个导航链接绑定事件，然后通过ajax请求，获取内容并显示。那么问题来了！

回退、前进按钮用不了
当我们刷新页面时，不管当前在浏览哪个类型的服饰，都会重新回到默认加载的类型。
地址栏的url没有变化，也意味着我们没法把某个服饰的地址保存下来，进行分享或者收藏。

来吧，先上一段demo！感受一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录</title>
    <style>
        html,body{margin:0;padding:0;height:100%;overflow: hidden;}
        aside{height:100%;width:220px;background-color: #cfcfcf;float: left;overflow: auto;}
        section{margin-left: 220px;background-color: #f5f5f5;height: 100%;overflow: auto;}
        ul>li{list-style: none;font-size: 16px;line-height: 2;cursor: pointer;}
    </style>
</head>
<body>
    <aside>
        <ul id="ul-id"></ul>
    </aside>
    <section id="section-id"></section>
</body>
<script>
    (function(){
        var datainfo = {data:[
            {name:"张三",content:"张三是个不爱干净的人"},
            {name:"李四",content:"李四是个有洁癖的人"},
            {name:"王五",content:"王五是个随便的人"}
        ]};
        var ulid = document.querySelector("#ul-id");
        for(var lists in datainfo.data){
            var liadd = document.createElement("li");
            liadd.innerHTML=datainfo.data[lists].name;
            liadd.setAttribute("data-id",lists);
            liadd.setAttribute("data-name",datainfo.data[lists].name);
            ulid.appendChild(liadd);
        }
        //history.replaceState用于初始化url地址后缀
        history.replaceState(null, null,"?name=妈的智障");

        var ulidli = document.querySelectorAll("#ul-id>li"),
            sectionid = document.querySelector("#section-id");
        for(var i = 0;i<ulidli.length;i++){
            ulidli[i].addEventListener("click",function(){
                var indesid = this.dataset["id"];
                sectionid.innerHTML=datainfo.data[indesid].content;
                if(window.history && history.pushState){
                    //添加一个新的历史记录
                    history.pushState(indesid,null,"?name="+indesid);
                }else{
                    alert("抱歉，不支持！")
                }
            });
        }
//        当我们在使用pushState()函数伪造的历史记录中前进或后退时都会执行一个popstate事件
        window.addEventListener("popstate",function(e){
            var backnu = e.state;
            console.log(backnu)
            if(backnu===null){
                backnu=0;
            }
           sectionid.innerHTML=datainfo.data[backnu].content;
        });
    })()
</script>
</html>

浏览器是通过 window对象的 history对象来对浏览器历史访问记录，从而可以实现前进和后退。
history对象拥有：pushState()和replaceState()两个方法，同时，结合window.onpostate事件就可以解决文章开头的服饰场景问题了。
pushState()方法有三个参数：