浅谈通过JS拦截 pushState和replaceState事件

history.pushstate 和 history.replacestate 可以在不刷新当前页面的情况下更改url，但是这样就无法获取通过ajax得到的新页面的内容了。

虽然各种html5文档说 window.onpopstate 事件可以拦截 pushstate 的消息，但在实际的测试中， onpopstate 根本没有任何作用，无法拦截 pushstate 的消息。

经过google一番，才找到了正确获取 pushstate 事件的代码

// add this:
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');

// use it like this:
window.addeventlistener('pushstate', function(e) {
  console.warn('they did it again!');
});
window.addeventlistener('replacestate', function(e) {
  console.warn('they did it again!');
});

这段代码改写了 history 中原来的函数，然后自己激活一个事件

这样就可以解决 pushstate 无法激活事件的问题了

另外记得最好将这段代码放在文档加载前执行

以上这篇浅谈通过js拦截 pushstate和replacestate事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。