html5访问历史记录案列

来源：互联网发布：网络音乐盛典歌曲编辑：程序博客网时间：2024/06/18 11:40

今天我们来讲一下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()方法有三个参数：

第一个参数表示一种状态，可以存放任意内容，可以在onpostate事件中获取到便于做相应的处理。
第二个参数表示设置浏览器历史记录的名称，不过目前还没有任何一个浏览器支持这个参数，所以我们可以写为null。
第三个参数表示保存到历史记录中的url地址。

replaceState()方法方法和pushState()方法类似，参数也相同。不同的是，replaceState()是用来修改history对象中记录的当前页面的信息，它不是新建一个记录。

设置好历史记录之后，每当我们前进或后退都会执行一个popstate事件。我们可以通过这个此事件的返回对象来实现我们自己的业务逻辑。

好了，关于html5的历史记录就先介绍到这儿了，如有不对的地方！欢迎指正。

阅读全文

0 0