html5 history解决ajax不能加入历史记录的问题

2019独角兽企业重金招聘Python工程师标准>>>

最近抽空研究了html5 history，并写了个小测试，由于只在前端展示，我把对于ajax的处理换为了简单的JS事件，直接复制代码，可以在静态页面查看。

一、基本操作

// 浏览器后退

window.history.back();
window.history.go(-1);

// 浏览器前进

window.history.forward();
window.history.go(1);

// 浏览器刷新

window.history.go(0);

二、history方法

1、history.pushState()

pushState(state,title,url)方法有三个参数;

state(第一个参数)：放入需要保存在历史记录的数据，以对象形式封装；

title (第二个参数)：目前可以忽略，基本不需要；

url (第三个参数) ：添加在原始url地址的尾缀，可以问号隔开原始url，问号与其后参数便是此处值

2、history.replaceState()

替换当前页的历史记录，用法与 pushState 相同;

注：如果只替换数据，则第三个值不需要

3、popstate

每当活动的历史记录项发生变化（pushState或者replaceState）时，popstate事件都会被传递给window对象,尔后浏览器操作时读取的便是改变后的值;

注：记得还要在popstate里面写入对数据的处理，浏览器才会正常展示之前看到的页面；

4、window.onpopstate()

当浏览器操作（前进/后退）时，会触发 window.onpopstate() 事件，从window的历史记录调取数据；

三、简单的例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>div{position: fixed;top: 100px;font-size: 22px;}</style><body><div id="text">这是第0个页面</div><button onclick="change(this)" page="0">点击变化</button><button onclick="change(this)" page="1">点击变化</button><button onclick="change(this)" page="2">点击变化</button><button onclick="change(this)" page="3">点击变化</button><script>var obj={}; function url_deal(){
//              获取url,模拟后台解码传递数据var url = window.location.href,_page = url.split("?")[1].split("&");_page.map(function(str){var arr = str.split("=");obj[arr[0]] = arr[1]    })return obj    }url_deal();var value =    ["这是第0个页面","这是第1个页面","这是第2个页面","这是第3个页面",                   ];
//              数据处理 document.getElementById("text").innerHTML = value[obj.page||0];
//              替换当前页面的历史记录并存入数据history.replaceState({text:document.getElementById("text").innerHTML}, '');
//              console.log(obj)</script><script>   function change(_self){
//              _self.getAttribute("page") 为button内 page属性的值url_deal();//重新获取url并解码//             备注：这里可以换为请求ajax获取数据 var text1 = "这是第"+_self.getAttribute("page")+"个页面";document.getElementById("text").innerHTML = text1;//              history.pushState是给浏览器添加历史记录，可以把需要保存的值放入history.state(第一个参数)里面(数据放入历史记录)if(obj.page && obj.page == _self.getAttribute("page")){
//                  判断如果当前页面与要请求的页面是同一个则调用浏览器刷新window.location.reload();return;}else if(!obj.page && "0" == _self.getAttribute("page")){window.location.reload();return;}//               获取的数据放入pushState后的第一个参数内  这里的例子为：{text:text1}                history.pushState({text:text1}, '', '?page='+_self.getAttribute("page"));obj = {}//清空内容,便于下次的填入数据}
//           popstate，当浏览器变化(前进、后退、刷新)时运行window.addEventListener("popstate", function() {
//              history.state指向上面history.pushState的第一个值
//              前进/后退/刷新的时候，可以引入这里的数据var result = history.state;
//              这里要对存入的数据进行处理,在需要的位置填入相应的数据，才会正常展示保存时的界面document.getElementById("text").innerHTML = result.text;});</script></body>
</html>

转载于:https://my.oschina.net/u/3797834/blog/1800981