引言
最近心气比较浮躁，潜意识告诉自己慢一点，再慢一点，感觉只是说给自己听的。
为了缓和一下自己扭曲的心态，写篇博文治疗治疗~
利用popstate事件和window下的history对象处理浏览器跳转
1、popstate事件
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。
2、History 接口
属性：
- History.length 表示历史会话中元素的数目
- History.scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
- History.state 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态的方式。
方法：
- History.back()
等同于history.go(-1)
- History.forward()
等同于history.go(1)
- History.go()
这个方法中如果参数超出范围或者不对就不会起效果
- History.pushState()
pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。下面将对这三个参数进行细致的检查
function pushHistory() {
var state = { title: "title", url: "#" };
window.history.pushState(state, "title", "#xx");
}
监听浏览器返回按钮
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#xx");
}
pushHistory();
window.addEventListener("popstate", function(e) {
console.log(e);
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
这个地方就监听到了浏览器的返回事件，但我有个疑问，如果不先pushState一个地址就监听不到，直接跳转了，这个暂时没搞懂。
禁止返回上一页的一种方案
history.pushState(null, null, document.URL);
window.addEventListener("popstate",function(e) {
console.log(e);
history.pushState(null, null, document.URL);
}, false);
这个其实就是利用pushState向浏览历史列表中插入当前页面，在点击后退和前进时都插入一次，那样无论点前进还是后退永远都会留在这个页面了
其他方法就不一一列举了，感兴趣的看文档
- History.back()
前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1).
Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
- History.forward()
在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1).
- History.go()
通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When integerDelta is out of bounds )，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。( 这点与支持字符串作为url参数的IE有点不同)。
- History.pushState()
按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；你可以指定任何可以被序列化的javascript对象。
在HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。下面将对这三个参数进行细致的检查：
state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。（译者注：总而言之，它存储JSON字符串，可以用在popstate事件中。）state 对象可以是任何可以序列化的东西。由于 火狐 会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些state对象会恢复，我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用sessionStorage或者localStorage。
title — 火狐浏览器现在已经忽略此参数，将来也许可能被使用。考虑到将来有可能的改变，传递一个空字符串是安全的做法。当然，你可以传递一个短标题给你要转变成的状态。（译者注：现在大多数浏览器不支持或者忽略这个参数，最好用null代替）
URL — 这个参数提供了新历史纪录的地址。请注意，浏览器在调用pushState()方法后不会去加载这个URL，但有可能在之后会这样做，比如用户重启浏览器之后。新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL。
- History.replaceState()
按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。这个数据被DOM 进行了不透明处理。你可以指定任何可以被序列化的javascript对象。
再度强化认识
上面的叙述让我们对一些基本要素有些认识，但是实操下来不尽如人意，没有达到预期的理解效果。
一、popstate用来做什么的？
简而言之就是HTML5新增的用来控制浏览器历史记录的api。
二、过去如何操纵浏览器历史记录？
window.history对象，该对象上包含有length和state的两个值，在它的proto上继承有back、forward、go等几个功能函数
在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。
例如：
history.back(); (后退一步，使用history.go(-1)也可实现后退效果)
弊端：只能操作前进后退，但是无法控制前进后要去哪，history.length都只会维持原来的状态
三、popstate的怎么用？
HTML5的新API扩展了window.history，使历史记录点更加开放了。可以存储当前历史记录点pushState、替换当前历史记录点replaceState、监听历史记录点popstate。
pushState、replaceState两者用法差不多。
使用方法：
history.pushState(data,title,url);
//其中第一个参数data是给state的值；
//第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；
//第三个参数url是你想要去的链接；
replaceState用法类似，例如：history.replaceState("首页","",location.href+ "#news");
两者区别：pushState会改变history.length，而replaceState不改变history.length
通过下图我们可以对比看出pushState和replaceState的差别（注意看history.length的变化）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图解用HTML5的popstate如何玩转浏览器历史记录</title>
</head>
<body>
<span class="js-news">新闻</span>
<span class="js-music">音乐</span>
<script>
var locationHref = location.href;
document.addEventListener("click", function (event) {
var target = event.target;
if (target.className == "js-news") {
history.pushState("首页", "", locationHref + "#news");
} else if (target.className == "js-music") {
history.pushState("音乐", "", locationHref + "#music");
}
});
/* document.addEventListener("click",function(event){
var target = event.target;
if(target.className == "js-news"){
history.replaceState("首页","",locationHref + "#news");
}else if(target.className == "js-music"){
history.replaceState("音乐","",locationHref + "#music");
}
});*/
window.addEventListener("popstate", function () {
console.log(history.state);
})
</script>
</body>
</html>
四、监听浏览器状态（popstate）变化事件
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。在上面的demo中，我们预先做了如下操作：打开页面→点击“新闻”→点击“音乐”→再点击“新闻”，产生了4个history记录。然后监听浏览器后退和前进的状态变化，如下图所示：
遇到的一些小坑
pushState方法在改变url的同时向浏览器历史栈中压入新的历史记录。
接收url的参数为string类型,用以改变当前地址栏的url。需要注意的一点就是这个参数不能进行跨域，即协议，域名，端口必须都是相同的，如果出现跨域的情况，即会提示：
Uncaught DOM Exception: Failed to execute 'pushState' on 'History': A history state object with URL http://www.baidu.com/ cannot be created in a document with origin 'http://commanderXL.com' and URL
Example:
打开www.baidu.com
history.pushState(null, null, '?page=1')
//地址栏变成 www.baidu.com/?page=1
history.pushState(null, null, '#page=2');
//地址栏变成 www.baidu.com/#page=2
其中replaceState:
history.replaceState(null, null, '#page=2');
replaceState接收的参数与pushState相同，但是最终的效果是：地址栏url会根据接收的参数而变化，但是浏览器并未在当浏览历史栈中增加浏览器的历史记录，而是替换当前的浏览器历史记录。
