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

最近抽空研究了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的历史记录调取数据；

三、简单的例子

div{

position: fixed;

top: 100px;

font-size: 22px;

}

这是第0个页面

点击变化

点击变化

点击变化

点击变化

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)

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;

});