history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址。
history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上。
history.state：获取历史栈中最顶端的state数据（即history.pushState中的第一个参数），不同浏览器的读写权限不一样。
popstate事件：当用户单击浏览器的后退或者前进按钮（或者调用history.go，history.back，history.forward方法也会触发popstate事件。调用history.pushState()或者history.replaceState()不会触发popstate事件，但改变url中的hash值会触发popstate事件）时触发该事件。在事件处理函数中读取触发事件的事件对象的state属性值，该属性值即为执行pushState方法时所使用的第一个参数值，该state与history.state是相同的，而不是历史栈中被抛出的state对象。
到目前为止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本浏览器支持HTML5中的History API。
判断是否支持h5 history api：
if (‘pushState’ in history) { … };
一个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="12.html?color=green">green</a><br/>
<a href="12.html?color=yellow">yellow</a><br/>
<a href="12.html?color=blue">blue</a>
<div style="height: 100px;"></div>
<script>
history.replaceState({
color: 'red'
}, '红色',"?color=red");//设置初始记录
setBackgroundColor("red");
window.onpopstate = function (event) {
setBackgroundColor(event.state.color);
};//url改变触发onpopstate事件
var aArr = document.getElementsByTagName('a');
for(var i = 0, num = aArr.length; i < num; i++){
aArr[i].onclick = (function (i) {
return function (event) {
var query = this.href.split("?")[1];
var color = query.split("=")[1];
event.preventDefault();
if (history.state.color !== color) {
setBackgroundColor(color);
history.pushState({
color: color
}, color ,location.href.split("?")[0] + "?" + query);
}
}
})(i)
}
function setBackgroundColor(color) {
document.getElementsByTagName('div')[0].style.backgroundColor = color;
}
</script>
</body>
</html>
2443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
