浅谈通过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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 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 金额数字转换成英文
2010/05/06 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php无序树实现方法
2015/07/28 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中encode()方法的使用简介
2015/05/18 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python之web模板应用
2017/12/26 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
应用电子技术专业个人求职信
2013/09/21 职场文书
计算机求职信
2013/12/01 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
学生犯错保证书
2015/05/09 职场文书
张丽莉观后感
2015/06/16 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python