通过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 ...
随机推荐
- Java 算法(一)贪心算法
Java 算法(一)贪心算法 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 一.贪心算法 什么是贪心算法?是指在对问题进行求 ...
- Windows服务器支持json文件
Windows服务器默认是不支持json文件的直接读取的.如在浏览器中输入地址访问或是通过代码访问,都是无法获取到数据的.需要在服务器端进行配置,让服务器支持解析.json扩展名的json文件. 方法 ...
- Linux日志文件总管——logrotate
日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处理一个单个的庞大日 ...
- keras框架的CNN手写数字识别MNIST
参考:林大贵.TensorFlow+Keras深度学习人工智能实践应用[M].北京:清华大学出版社,2018. 首先在命令行中写入 activate tensorflow和jupyter notebo ...
- 824. Goat Latin
class Solution { public: string toGoatLatin(string S) { S.push_back(' '); //add a space that the loo ...
- 2019.01.20 bzoj3784: 树上的路径(二分答案+点分治)
传送门 点分治好题. 题意简述:给一棵带边权的树,问所有路径中前mmm大的.m≤300000m\le300000m≤300000 思路: 网上有题解写了可以通过什么点分治序转化成超级钢琴那道题的做法蒟 ...
- LOJ-10099(点双联通)
题目链接:传送门 思路: 如果图是点双联通的,即没有割点,直接从图中随意选两个点即可: 如果有一个割点,删除割点,求连通块的个数即可(在每个连通块内新建一个营救点). 如果有多个割点,则可以通过其他割 ...
- boost--BOOST_AUTO、typeof、result_of
1.BOOST_AUTO BOOST_AUTO的功能类似于auto和any,可以用来定义任意类型数据,且可以在编译时自动推导出表达式的类型.BOOST_AUTO属于boost中的typeof库,使用需 ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...
- CentOS 7 / RHEL 7 运行单用户模式进行root的密码重置
步骤一,开机时随便按下键盘,进入以下菜单 步骤二: 选择第一项,按e键进行修改 步骤三,定位到 ro( linux 16 or linuxefi ) 步骤四:把ro改成 “rw init=/sys ...