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 事件的更多相关文章

  1. PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)

    说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...

  2. pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...

  3. HTML5 history新特性pushState、replaceState

    DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...

  4. HTML5 history新特性pushState、replaceState,popstate

    http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...

  5. hash 和pushState,replaceState

    hash 要点: 1.不会向后台发请求:#是用来指导浏览器动作的,对服务器端完全无用. 2.用来跳转到页面的指定位置:   为网页位置指定标识符,有两个方法.一是使用锚点,比如<a name=& ...

  6. HTML5 historyState pushState、replaceState

    DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...

  7. H5,API的pushState(),replaceState()和popstate()用法

    pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...

  8. 前端路由的实现(三) —— History的pushState和replaceState用法

    HTML5中history提供的pushState, replaceState这两个API.它们提供了操作浏览器历史栈的方法. pushState能够在不加载页面的情况下改变浏览器的URL.这个方法接 ...

  9. app内嵌vue h5,安卓和ios拦截H5点击事件

    安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...

随机推荐

  1. IOS初级:app的启动图像

    1,准备若干张适合不同设备满屏幕的图像 这里补充说明一下图像的命名方法: iphone4屏幕 Default@2x.png iphone5屏幕 Default-568h@2x.png  (568*2即 ...

  2. Rest架构风格的实践(使用通用Mapper技术)

    1.根据用户 id 查询用户数据 1.1 controll控制器 @RequestMapping("restful/user") @Controller public class ...

  3. 【转】Centos7下Yum安装PHP5.5,5.6,7.0

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...

  4. 2018.11.08 UVA11021 Tribles(概率dp)

    传送门 概率dpdpdp简单题. 设f[i]f[i]f[i]表示第iii天的答案. 然后枚举ppp数组从fi−1f_{i-1}fi−1​转移过来就行了. 显然有fi=∑j=0npj∗(fi−1)jf_ ...

  5. Codeforces Round #546 (Div. 2) D 贪心 + 思维

    https://codeforces.com/contest/1136/problem/D 贪心 + 思维 题意 你面前有一个队列,加上你有n个人(n<=3e5),有m(m<=个交换法则, ...

  6. Excel2007VBA数组和工作表及单元格的引用

    动态数组使用: https://zhidao.baidu.com/question/1432222709706721499.html 使用Redim动态数组即可. 1 2 3 4 5 6 7 8 Su ...

  7. mysql学习之路_外键

    回顾4 连接查询: 连接多张表到一起,不管记录数如何,字段数一定会增加. 分类:内连接,外连接.自然连接,交叉连接, 交叉连接:cross join (笛卡尔积) 内连接:inner join,左右两 ...

  8. sea.js教程

    转载自:http://blog.codinglabs.org/articles/modularized-javascript-with-seajs.html 前言 SeaJS是一个遵循CommonJS ...

  9. 1.3currentThread()方法

    该方法可返回代码段正在被哪个线程调用的信息 package com.cky.test; /** * Created by chenkaiyang on 2017/12/2. */ public cla ...

  10. Ng第八课:神经网络表述(Neural Networks: Representation)

    8.1  非线性假设 8.2  神经元和大脑 8.3  模型表示 1 8.4  模型表示 2 8.5  特征和直观理解 1 8.6  样本和直观理解 II 8.7  多类分类 8.1  非线性假设 无 ...