当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 浅谈通过JS拦截 pushState和replaceState事件

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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事件就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网