通过JS拦截 pushState 和 replaceState 事件
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 事件的更多相关文章
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...
- HTML5 history新特性pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...
- HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
- hash 和pushState,replaceState
hash 要点: 1.不会向后台发请求:#是用来指导浏览器动作的,对服务器端完全无用. 2.用来跳转到页面的指定位置: 为网页位置指定标识符,有两个方法.一是使用锚点,比如<a name=& ...
- HTML5 historyState pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...
- H5,API的pushState(),replaceState()和popstate()用法
pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...
- 前端路由的实现(三) —— History的pushState和replaceState用法
HTML5中history提供的pushState, replaceState这两个API.它们提供了操作浏览器历史栈的方法. pushState能够在不加载页面的情况下改变浏览器的URL.这个方法接 ...
- app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...
随机推荐
- [AI]AI章2 框架比较
深度学习框架比较 神经网络一般包括:训练,测试两大阶段.训练:就是把训练数据(原料)和神经网络模型:如AlexNet.RNN等“倒进” 神经网络训练框架例如cafffe等然后用 CPU或GPU(真火) ...
- POI导出大量数据的简单解决方案
说明:我的电脑 2.0CPU 2G内存 能够十秒钟导出 20W 条数据 ,12.8M的excel内容压缩后2.68M 我们知道在POI导出Excel时,数据量大了,很容易导致内存溢出.由于Excel ...
- Linux学习笔记:Shell脚本学习
概念 真正能够控制计算机硬件(CPU.内存.显示器等)的只有操作系统内核(Kernel),图形界面和命令行只是架设在用户和内核之间的一座桥梁. 由于安全.复杂.繁琐等原因,用户不能直接接触内核(也没有 ...
- 使用Python完成表格自动输入
看了看<Python编程快速上手>,写了个小脚本完成12306登录数据的自动输入.如下: 1 import webbrowser 2 import pyautogui 3 import t ...
- 非接触IC卡中typeA卡和typeB卡的区别--总结,二者的调制方式和编码方式不同
非接触IC卡中typeA卡和typeB卡的区别--总结,二者的调制方式和编码方式不同 1.非接触式IC卡的国际规范ISO/IEC14443的由来? 在非接触式IC卡的发展过程中,这些问题逐渐被解决并形 ...
- JS基础-表单元素-新表单元素-js概述
1.表单元素 1.input元素 1.隐藏域和文件选项框 1.隐藏域 <input type="hidden"> 要提交给服务器的数据,但是不想展示给用户看可以放在隐藏 ...
- java web各个技术细节总结
HTML 非表单标签 1.b 粗体 u 下划线 i 斜体 del 删除效果 2.a 超链接 href target=-blank 3.img 图片 4.frameset(frame) 框架 ...
- 2019.01.13 bzoj4137: [FJOI2015]火星商店问题(线段树分治+可持久化01trie)
传送门 题意:序列上有nnn个商店,有两种事件会发生: sss商店上进购标价为vvv的一个物品 求编号为[l,r][l,r][l,r]之间的位置买ddd天内新进购的所有物品与一个数xxx异或值的最大值 ...
- 2018.12.31 NOIP训练 偶数个5(简单数论)
传送门 对于出题人zxyoizxyoizxyoi先%\%%为敬题目需要龟速乘差评. 题意简述:5e55e55e5组数据,给出n,请你求出所有n位数中有偶数个5的有多少,n≤1e18n\le1e18n≤ ...
- C++中1/0和1/0.0的区别
参考:https://zhidao.baidu.com/question/1494117716904764979.html 问题说明:在Dev中1/0会报错“除数不得为0”,但是1/0.0不报错,并且 ...