-
History
使用back(), forward(), Go() 可以在用户历史记录中前进和后退。
-
Ajax + 添加和修改history实体（pushState / raplaceState）
HTML5 引入了 history.pushState() 和 history.replaceState() 这两个方法，他们允许添加和修改 history实体。
1. history.pushState(state, title, url)
pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给
你看的而已,第一个参数是一个对象,你可以放入需要的参数,第二个标题名称,第三个就是url.这是地址栏里显
示的东西。 url 不能跨域。
2. history.replaceState(state,title,url)
同history.pushState，只不过使用新的state 和URL替换当前的。
####3. window.onpopstate
用户点击浏览器历史前进后退按钮，并且页面无刷的时候（由于使用pushState修改了history）会触发
popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。
- 例子
var App={
Init:function(){
App.State(title,url);
App.StateListen();
},
State:function(title,url){//无刷新改变URL
if(window.history.pushState){
window.history.pushState({title:title,url:url},title,url);
}else{
location.href=url;
}
document.title=title;
},
StateListen:function(){//监听地址
var url=location.href.toString().split("/");
window.addEventListener('popstate', function(e){
if (history.state){
var url=e.state.url;
//根据url值进行相应操作
}
},false);
}
};
