js实现无刷新监听URL的变化示例代码详解


Posted in Javascript onJune 03, 2020

无刷新改变路由的两种方法通过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) {
 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 相关文章推荐
jquery插件之定时查询待处理任务数量
May 01 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
新手简单了解vue
May 29 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 #Javascript
You might like
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
隐性调用php程序的方法
2015/06/13 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python简单I/O操作示例
2019/03/18 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
微观物理专业自荐信
2014/01/26 职场文书
自荐信的基本格式
2014/02/22 职场文书
禁烟标语大全
2014/06/11 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript