关于H5的pushState、replaceState

参考MDN之 pushState
事例参考，可以借鉴这个网站 history.pushState无刷新改变url

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');
});