HTML5技术

通过JS拦截 pushState 和 replaceState 事件 - 夜闻香

字号+ 作者:H5之家 来源:H5之家 2017-07-21 11:01 我要评论( )

history.pushState和history.replaceState可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。 虽然各种HTML5文档说window.onpopstate事件可以拦截 pushState 的消息,但在实际的测试中, onpopstate 根本没有任何作用

history.pushState 和 history.replaceState 可以在不刷新当前页面的情况下更改URL,但是这样就无法获取通过AJAX得到的新页面的内容了。
虽然各种HTML5文档说 window.onpopstate 事件可以拦截 pushState 的消息,但在实际的测试中, onpopstate 根本没有任何作用,无法拦截 pushState 的消息。

经过Google一番,才找到了正确获取 pushState 事件的代码
https://stackoverflow.com/a/25673911

 

_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 无法激活事件的问题了
另外记得最好将这段代码放在文档加载前执行

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 通过history解决ajax不支持前进/后退/刷新 - PC.aaron

    通过history解决ajax不支持前进/后退/刷新 - PC.aaron

    2017-07-06 12:00

  • 每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要知识点:事件 - catEatBird

    每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要

    2017-06-24 15:01

  • CSS通过设置position定位的三种常用定位 - 涂涂的世界

    CSS通过设置position定位的三种常用定位 - 涂涂的世界

    2017-05-29 13:00

  • angular之interceptors拦截器 - webNick

    angular之interceptors拦截器 - webNick

    2017-05-15 16:00

网友点评
a