浅谈通过JS拦截 pushState和replaceState事件


Posted in Javascript onJuly 21, 2017

history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。

虽然各种HTML5文档说 window.onpopstate 事件可以拦截 pushState 的消息,但在实际的测试中, onpopstate 根本没有任何作用,无法拦截 pushState 的消息。

经过Google一番,才找到了正确获取 pushState 事件的代码

https://stackoverflow.com/a/25673911

// Add this:
var _wr = function(type) {
  var orig = history[type];
  return function() {
    var rv = orig.apply(this, arguments);
    var e = new Event(type);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return rv;
  };
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');

// Use it like this:
window.addEventListener('pushState', function(e) {
  console.warn('THEY DID IT AGAIN!');
});
window.addEventListener('replaceState', function(e) {
  console.warn('THEY DID IT AGAIN!');
});

这段代码改写了 history 中原来的函数,然后自己激活一个事件

这样就可以解决 pushState 无法激活事件的问题了

另外记得最好将这段代码放在文档加载前执行

以上这篇浅谈通过JS拦截 pushState和replaceState事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
优化javascript的执行速度
Jan 23 Javascript
jquery ui对话框实例代码
May 10 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 #Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 #Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 #Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 #Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 #Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 #Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 #Javascript
You might like
收集的PHP中与数组相关的函数
2007/03/22 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python3 enum模块的应用实例详解
2019/08/12 Python
python 实现音频叠加的示例
2020/10/29 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
super关键字的用法
2012/04/10 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
物流管理应届生求职信
2013/11/07 职场文书
高中生期末评语
2014/01/28 职场文书
自我鉴定标准格式
2014/03/19 职场文书
献爱心标语
2014/06/21 职场文书
大学生学习计划书
2014/09/15 职场文书
购房协议书范本
2014/10/02 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
opencv检测动态物体的实现
2021/07/21 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers