浅谈通过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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
js分页工具实例
Jan 28 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
如何用JS模拟实现数组的map方法
Jul 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
js的with语句使用方法
2007/09/21 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
npm的lock机制解析
2019/06/20 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
OpenCV实现人脸识别
2017/04/07 Python
Django实现表单验证
2018/09/08 Python
python实现推箱子游戏
2020/03/25 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python集合是否可变总结
2019/06/20 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
django框架auth模块用法实例详解
2019/12/10 Python
python实现FTP循环上传文件
2020/03/20 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
入股协议书范本
2014/04/14 职场文书
房屋维修申请报告
2015/05/18 职场文书
工作一年自我鉴定
2019/06/20 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS