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. How to Disable/Enable IP forwarding in Linux

    This article describes how to Disable or Enable an IP forwarding in Linux. Current IP forwarding sta ...

  2. javascript对象的属性,方法,prototype作用范围分析.

    用了javascript这么久由于没有系统学习过基础,总是拿来主义. 所以对一些基础知识还是搞不清楚很混乱. 今天自己做个小例子,希望彻底能搞清楚. 注释中对象只例子的对象本身,原型只原型继承对象的新 ...

  3. 为什么要选择OMP之合规性

  4. python 函数学习sys.argv[]

    sys.argv 参数 「argv」是「argument variable」参数变量的简写形式,一般在命令行调用的时候由系统传递给程序.这个变量其实是一个List列表,argv[0] 一般是“被调用的 ...

  5. mysql字符串类型数据

    字符串类型是在数据库中存储字符串的数据类型,字符串类型包括char,varchar,text,enum和set. OK,我们来一个一个的看下上面提到的几种类型. char类型和varchar类型 ch ...

  6. thinkphp生成的验证码提示因存在错误无法显示

    /** * 生成验证码 */ public function verify(){ ob_clean();//加上这段代码 $Verify = new Captcha(); $Verify->le ...

  7. VIP之Scaler

    VIP Scaller II   从以前的时序来看   当把2160p分辨率经过Scaller之后,变换为1080p输出的数据再经过CVO处理之后,输出的帧结构不正常,有效数据组成一个行,无效数据也是 ...

  8. RGB转换成YCbCr

    clear all; close all; clc; img=imread('colorbar.jpg');%('ngc6543a.jpg'); %img=mat2gray(img); %[0,1]; ...

  9. SCI投稿过程总结、投稿状态解析、拒稿后对策及接受后期相关问答

    SCI投稿过程总结.投稿状态解析.拒稿后对策及接受后期相关问答   http://muchong.com/t-9174366-1 SCI投稿过程总结.投稿状态解析.拒稿后处理对策及接受后期相关问答综合 ...

  10. Javaweb异常提示信息统一处理

    Java异常封装(自己定义错误码和描述,附源码) 2016年01月29日 22:30:54 小宝鸽 阅读数:23262 标签: java异常 更多 个人分类: Java基础 所属专栏: Java工作实 ...