浅谈通过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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JS document对象简单用法完整示例
Jan 14 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript编程起步(第六课)
2007/02/27 Javascript
JavaScript中的关键字"VAR"使用详解 分享
2013/07/31 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
javascript中Function类型详解
2015/04/28 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
如何卸载python插件
2020/07/08 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
运动会跳远加油稿
2014/02/20 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
工人先进事迹材料
2014/12/26 职场文书
采购员岗位职责
2015/02/03 职场文书
小学教研工作总结2015
2015/05/13 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python