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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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
PHP中Session的概念
2006/10/09 PHP
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
javascript 数组排序函数
2009/08/20 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
urllib2自定义opener详解
2014/02/07 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
护理个人求职信范文
2014/01/08 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
少年犯观后感
2015/06/11 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Node实现搜索框进行模糊查询
2021/06/28 Javascript
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS