通过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 ...
随机推荐
- Spring 中参数名称解析 - ParameterNameDiscoverer
Spring 中参数名称解析 - ParameterNameDiscoverer Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.ht ...
- 【UI测试】--规范性
- 用php脚本比较MySQL两个数据库的结构差异
define('DATABASE1', 'mysql://root:password@127.0.0.1/db1'); $dbi1 = new DbMysql; $dbi1->dbh = DAT ...
- python数据结构详解
Python中常见的数据结构可以统称为容器(container).序列(如列表和元组).映射(如字典)以及集合(set)是三类主要的容器. 一.序列(列表.元组和字符串) 序列中的每个元素都有自己的编 ...
- 使用Apache CXF和Spring集成创建Web Service(zz)
使用Apache CXF和Spring集成创建Web Service 您的评价: 还行 收藏该经验 1.创建HelloWorld 接口类 查看源码 打印? 1 package ...
- oracle创建、删除 数据库、建立表空间以及插入 删除 修改表
一.创建.删除数据库 oracle OraDb11g_home->配置和移植工具->Database configration Assistant->...然后可以创建或者删除数据 ...
- 各种 on事件触发js代码
[转]各种 on事件触发js代码 1.onmouseenter:当鼠标进入选区执行代码 <div style="background-color:red" onmouseen ...
- 如何使用GCC生成动态库和静态库
根据链接时期的不同,库又有静态库和动态库之分.静态库是在链接阶段被链接的,所以生成的可执行文件就不受库的影响,即使库被删除,程序依然可以成功运行.而动态库是在程序执行的时候被链接的.程序执行完,库仍需 ...
- Python开课复习10
# 储备知识:# 函数的使用应该分为两个明确的阶段# 1. 定义阶段:只检测语法,不执行函数体代码def func(): print('from func')# 2. 调用阶段:会触发函数体代码的执行 ...
- 苹果电脑thunderbolt连接两台电脑启动方法
thunderbolt:首先连接连台电脑 然后开启可以启动的电脑, 关闭无法启动的电脑. 接着 按一下法启动的电脑电源—> 然后按t键 会在另外一台可以启动的电脑上出现,无法启动电脑的磁盘. 就 ...