监听url变化

最近在做一个url变换的监测在网上查到h5的replaceState和pushState,撸了几行代码

  window.addEventListener('replaceState', function (e) {
    // 页面切换url上报
    pageChange(location.href);
  })
  window.addEventListener('pushState', function (e) {
    // 页面切换url上报
    pageChange(location.href);
  })

然并卵，并没有得到想要的结果，后来在网上查到一个函数。

  // 重写pushState与replaceState事件函数
  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');

此时调用以上两个监听，就可以收集到url的变化信息了，你以为这就结束了。。。并没有

ie老祖宗不同意啊。。。

为了兼容，ie中只能计时器，（消耗性能），为减少消耗需判断一下环境再使用以下代码

    var url = location.href
    // 不支持则用定时器检测的办法
    setInterval(function() {
        if(url!=location.href){
          url = location.href
          pageChange(location.href)
        }
    }, 150);