关于H5的pushState、replaceState

最近我爱模板网在做一个网站，这个网站不大，也需要seo，就没有用vue了，纯H5原生。但是里面有一块tab切换，需要实现无刷新切换。考虑到tab页内容不少，不适合放在一个页面用显示隐藏来实现，用jQuery的load方法加载更加合适，或者用pjax。客户要求URL能变化，点击浏览器能前进后退，这时，就要用pushState和replaceState来实现了。

下面对这两个方法以及popstate介绍比较清晰，在这里记录下：

1. pushState
说明
浏览器不会向服务端请求数据，直接改变url地址，可以类似的理解为变相版的hash；但不像hash一样，浏览器会记录pushState的历史记录，可以使用浏览器的前进、后退功能作用

使用方法

pushState(state, title, url)

参数说明
    state: 可以通过history.state读取
    title: 可选参数，暂时没有用，建议传个短标题
    url: 改变过后的url地址、

2. replaceState
说明
不同于pushState，replaceState仅仅是修改了对应的历史记录

例子
打开页面，使用浏览器的前进、后退，只会出现http://ip/page2和http://ip，不会出现pushState的地址，因为已经被replaceState给修改了

history.pushState({page: 1}, "title 1", "page1");
history.replaceState({page: 2}, "title 3", "page2");

3. popstate
说明
当用户在浏览器点击进行后退、前进，或者在js中调用histroy.back()，history.go()，history.forward()等，会触发popstate事件；但pushState、replaceState不会触发这个事件。

使用方法

 /** 当界面跳转到pushState或者replaceState的时候 就会打印出来pushState或者replaceState之前设置的state值 */
window.onpopstate = function(e) {
  console.log(JSON.stringify(e.state));     
}

那么如何监听 pushState 和 replaceState 的变化呢？具体可参考该文 如何监听URL的变化：

var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');

window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});