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遮罩层代码实例
Nov 14 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
vue打包时去掉所有的console.log
Apr 10 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
写一个用户在线显示的程序
2006/10/09 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php && 逻辑与运算符使用说明
2010/03/04 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
js倒计时抢购实例
2015/12/20 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python statsmodel的使用
2020/12/21 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
保护环境倡议书范文
2014/05/13 职场文书
销售经理工作检讨书
2015/02/19 职场文书
教师节主持词开场白
2015/05/29 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js