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) {
 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变化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS基于Location实现访问Url、重定向及刷新页面的方法分析

    本文实例讲述了JS基于Location实现访问Url.重定向及刷新页面的方法.分享给大家供大家参考,具体如下: js通过Location实现访问Url,重定向,刷新页 web中经常会使用到刷新页面,访问url.重定向请求的功能. javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的.它是作为window对象的属性.你可以生成一个包含当前url的新location对象: var currentURL=window.location

  • js中获取URL参数的共用方法getRequest()方法实例详解

    下面通过一段代码给大家介绍js中获取URL参数的共用方法getRequest()方法,具体代码如下所示: getRequest : function() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&am

  • 使用JavaScript解析URL的方法示例

    使用JavaScript解析URL的方法示例

    前言 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点.下面话不多说了,来一起看看详细的介绍吧 开始 创建一个以下内容的 HTML 文件,并在浏览器中打开. <html> <head> <title>JavaScript URL parsing</title> </head> <body> <script> // 激动人心的代码即将写在这里 </script> <

  • linux shell中curl 发送post请求json格式问题的处理方法

    今天在linux中使用curl发送一个post请求时,带有json的数据,在发送时发现json中的变量没有解析出来 如下 curl -i -X POST -H 'Content-type':'application/json' -d {"BTime":""$btime""} http://api.baidu.com 变量没有做解析 原来在shell中,"" '还是有很大区别的, 把修改后的curl发送贴出 atime=`dat

  • JS中通过url动态获取图片大小的方法小结(两种方法)

    很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放. 查阅资料,我总结了两种通过url获取图片大小的方法: 1.预加载获取图片大小 var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if

  • js如何获取图片url的Blob值并预览示例代码

    前言 Blob 对象表示一个不可变.原始数据的类文件对象.Blob 表示的不一定是JavaScript原生格式的数据.File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件. 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下 1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var

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

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

  • SpringBoot如何监听redis Key变化事件案例详解

    SpringBoot如何监听redis Key变化事件案例详解

    目录 一 .功能概览 二.事件类型 三.配置 三.案例 代码 新增和修改都是set指令 删除 过期 总结 键空间通知(keyspace notification) 一 .功能概览 键空间通知使得客户端可以通过订阅频道或模式, 来接收那些以某种方式改动了 Redis key变化的事件. 所有修改key键的命令. 所有接收到 LPUSH key value [value …] 命令的键. db数据库中所有已过期的键. 事件通过 Redis 的订阅与发布功能(pub/sub)来进行分发, 因此所有支持

  • AngularJS监听路由的变化示例代码

    话不多说,我们下面直接来看实现的示例代码 [一]Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$location'实现状态的管理 代码示例如下: function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$s

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • Node.js基础入门之path模块,url模块,http模块使用详解

    Node.js基础入门之path模块,url模块,http模块使用详解

    目录 path模块 1. path模块示例 2. path模块其他方法 url模块 1. 旧的解析方法 2. 新的解析方法 http模块 1. 什么是HTTP协议? 2. HTTP协议约束的细节 3. HTTP请求响应过程 4. http模块get方法 经过前面四天的学习,对Node.js已经有了一个基础的认识,今天继续学习Node.js网络通信编程相关内容,并稍加整理加以分享,如有不足之处,还请指正. path模块 Node.js中,提供了一个path模块,在这个模块中,提供了许多实用的,可被

  • Flume监听oracle表增量的步骤详解

    需求:获取oracle表增量信息,发送至udp514端口,支持ip配置 步骤: (1)需要的jar  oracle的 odbc5.jar(oracle安装目录  /jdbc/lib下查找) (2)flume的开源包flume-ng-sql-source-1.4.3.jar  最新的好像是1.5的 小版本记不住了 这个下载地址直接csdn上就有 这两个jar 都拷贝到flume的lib下 (3)flume配置文件 a1.sources = r1 a1.sinks = k1 a1.channels

  • Android 监听软键盘状态的实例详解

    Android 监听软键盘状态的实例详解 近日遇到要检测软键盘是否显示或隐藏的问题,搜了一下网上,最后找到一个很简单的,记录一下. activityRoot是activity的根view,就是xml里面的第一个view,给它设置一个id. final View activityRootView = findViewById(R.id.activityRoot); activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(ne

  • android studio按钮监听的5种方法实例详解

    1.匿名内部类 public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btn1 = fin

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

随机推荐