js实现无刷新监听URL的变化示例代码详解
更新时间：2020年06月03日 15:49:54 作者：zpfei
这篇文章主要介绍了js如何无刷新监听URL的变化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
无刷新改变路由的两种方法通过hash改变路由
代码
window.location.hash='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) {
const orig = history[type];
const e = new Event(type);
return function() {
const rv = orig.apply(this, arguments);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');
监听
window.addEventListener('pushState', function(e) {
console.log('change pushState');
});
window.addEventListener('replaceState', function(e) {
console.log('change replaceState');
});
总结
到此这篇关于js如何无刷新监听URL的变化的文章就介绍到这了,更多相关js 无刷新监听url变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了JavaScript实现动态表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)，需要的朋友可以参考一下2013-03-03
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
这篇文章主要介绍了JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法,涉及JS递归算法操作数组实现排序功能的相关技巧,需要的朋友可以参考下2017-01-01
在现代Web开发中，JavaScript已经成为无法替代的核心技术，在现代Web开发中，JavaScript已经成为无法替代的核心技术，本文将通过代码示例详细介绍一些实践解决方案，感兴趣的同学可以参考下2023-06-06
preload.js文件在Electron应用中起着桥梁的作用,使得在保持安全的同时,渲染进程可以访问主进程的功能,保持渲染进程与主进程隔离的同时,又能使渲染进程具有访问特定Electron API的能力的方法,本文给大家分享electron中preload.js文件的用法,感兴趣的朋友一起看看吧2024-04-04
在SSM框架下用laypage和ajax实现分页和数据交互的方法
今天小编大家分享一篇在SSM框架下用laypage和ajax实现分页和数据交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
闭包机制是JavaScript的重点和难点，本文希望能帮助大家轻松的学习闭包。下面跟着小编一起来看下吧2017-03-03
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露，下面与大家详细探讨下内存泄露的几种情况2013-05-05
这篇文章给大家罗列了在前段排序中会遇到的问题并写了解决方案，非常详细，有需要的朋友可以参考。2016-07-07
这篇文章主要介绍了js实现微信分享朋友链接显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论