history的pushState和replaceState

pushState和replaceState

HTML5新接口，可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。
注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面!

window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

window.history.replaceState(data, title, targetURL);
@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

popstate事件

popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
注意:用history.pushState()或者history.replaceState()不会触发popstate事件。

window.onpopstate = function(event) {console.log(event.state);console.log(window.history.state;);
};
@以上两种log效果相同,皆可获取之前在pushState和replaceState中传入的data

作者：李霖弢
链接：https://www.jianshu.com/p/808292c42cda
来源：简书

history的pushState和replaceState相关推荐

无刷新跳转—关于history中pushState和replaceState方法详解
〝古人学问遗无力,少壮功夫老始成〞 **关于history中pushState和replaceState方法详解,**常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫 ...
js：如何监听history的pushState方法和replaceState方法。（高阶函数封装+自定义事件）
出现原因: 想要监听路由变化就需要监听history的pushState和replaceState事件,但是原生并没有支持,此时,我们就得自己添加事件监听. 解决方法: 高阶函数封装自定义事件: co ...
HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
History 对象的pushState()和replaceState()
今天在看vue-router的时候发现,vue-router源码用到了history.pushState()和history.replaceState(),故,仔细看一下. 一. 概述 window. ...
PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
说在前面什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
popstate、pushState、replaceState操作浏览器历史记录
pushState和replaceState都属于history的操作方法一.pushState方法向浏览器的历史记录中新增一条记录使用:history.pushState(state,titl ...
H5路由的pushState()，replaceState()和popstate()用法
History路由的pushState,replaceState和popstate的区别 HTML5中引入了history.pushState().history.replaceState().p ...
（转）H5的pushState与replaceState的用法
一.简介 HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目.这些方法通常与window.onpops ...
HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一.popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和sta ...

history的pushState和replaceState

pushState和replaceState

popstate事件

history的pushState和replaceState相关推荐

最新文章

热门文章