源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-06-24 10:42 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:浅谈通过JS拦截 pushState和replaceState事件
history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。 虽然各种HTML5文档说 window.onpopstate 事件可以拦截 pushState 的消息,但在实际的测试中, onpopstate 根本没有任何作用,无法拦截 pushState 的消息。 [b]经过Google一番,才找到了正确获取 pushState 事件的代码[/b] [url=https://stackoverflow.com/a/25673911]https://stackoverflow.com/a/25673911[/url]
// 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事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部