js实现无刷新监听URL的变化示例代码详解
无刷新改变路由的两种方法通过hash改变路由
代码
window.location.hash='edit'
效果
http://xxxx/#edit
通过history改变路由
- history.back():返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同
- history.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同
- history.go():可以跳转到浏览器会话历史中的指定的某一个记录页
- history.pushState()可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url
- history.replaceState()将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url
监听url变化
监听hash变化
window.onhashchange=function(event){
console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
console.log(event);
})
监听back/forward/go
如果是history.back(),history.forward()、history.go()那么会触发popstate事件
window.addEventListener('popstate',function(event){
console.log(event);
})
但是，history.pushState()和history.replaceState()不会触发popstate事件，所以需要自己手动增加事件
监听pushState/replaceState
history.replaceState和pushState不会触发popstate事件，那么如何监听这两个行为呢。可以通过在方法里面主动的去触发popstate事件。另一种就是在方法中创建一个新的全局事件。
改造
const_historyWrap=function(type){
constorig=history[type];
conste=newEvent(type);
returnfunction(){
constrv=orig.apply(this,arguments);
e.arguments=arguments;
window.dispatchEvent(e);
returnrv;
};
};
history.pushState=_historyWrap('pushState');
history.replaceState=_historyWrap('replaceState');
监听
window.addEventListener('pushState',function(e){
console.log('changepushState');
});
window.addEventListener('replaceState',function(e){
console.log('changereplaceState');
});
总结
到此这篇关于js如何无刷新监听URL的变化的文章就介绍到这了,更多相关js无刷新监听url变化内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！