html5访问历史记录案列

2017-10-25 08:23:22来源:CSDN作者:mollyGO人点击

分享

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

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

  1. 回退、前进按钮用不了
  2. 当我们刷新页面时,不管当前在浏览哪个类型的服饰,都会重新回到默认加载的类型。
  3. 地址栏的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()方法有三个参数:

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

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

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

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台