您现在的位置:首页行业资讯

html5 history pushState和replaceState的使用--中享思途

pushState和replaceState是一个HTML5的新接口,他们的作用非常大,可以做到改变网址却不需要刷新页面,这个特性后来用到了单页面应用中比如:vue-router,react-router-dom里面,咱们就先看看它的原理和使用案例吧。pushState说明

青岛HTML5培训--中享思途

pushState方法接受三个参数,依次为:state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。最常用的方法:window.history.pushState(null,null,'download?id=1');完整使用:var oState= {title: '下载' };window.history.pushState(oState, '下载', 'download?id=1');特点:pushState()可以创建历史,可以配合popstate事件,可以使用history.go(-1)返回到上一个页面。比如:window.addEventListener('popstate', function(evt){var state = evt.state;document.title= state.title; }, false);replaceState说明

青岛HTML5培训--中享思途

replaceState和pushState原理一样使用也一样:最常用的方法:window.history.replaceState(null,null,'download?id=1');完整使用:var oState= {title: '下载' };window.history.replaceState(oState, '下载', 'download?id=1');特点:replaceState不会加入到历史记录里面,用history.go(-1)会跳过当前页面相当于是history.go(-2)。

【关键词:青岛HTML5培训,学HTML5多少钱,HTML5培训哪家好,中享思途】

 st_bottom
青岛Java培训,青岛HTML5培训,青岛UI培训,青岛web开发培训,青岛IT培训,java培训,ui培训,HTML5培训,java就业培训,专业ui设计,web开发培训,IT培训,思途教育,青岛思途,中享思途
Copyright © 青岛思途共享科技信息服务有限公司 鲁ICP备14027489号-2

鲁公网安备 37021402000988号

青岛Java培训,青岛HTML5培训,青岛UI培训,青岛web开发培训,青岛IT培训,java培训,ui培训,HTML5培训,java就业培训,专业ui设计,web开发培训,IT培训,思途教育,青岛思途,中享思途