最近在做一个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);