pushState 和 replaceState

使用此方法浏览器前进后退仍然可查看对应内容

两个方法的主要区别就是：pushState()是在history栈中添加一个新的条目，replaceState()是替换当前的记录值。用pushState的时候会产生一条新的history，replaceState则不会产生。

设置值

history.pushState({}, "页面标题", "xxx.html");

history.replaceState(null, "页面标题", "xxx.html");

比如设置 history.pushState({},"","#2"); 获取location.hash == “2”

某种意义上，调用pushState()有点类似于设置window.location='#foo'，它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势：

新的URL可以是任意的同源URL，与此相反，使用window.location方法时，只有仅修改 hash 才能保证停留在相同的document中。
根据个人需要来决定是否修改URL。相反，设置window.location='#foo'，只有在当前hash值不是foo时才创建一条新历史记录。
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法，你只能把相关数据转码成一个很短的字符串。

注意pushState()方法永远不会触发hashchange事件，即便新的地址只变更了hash。

参考地址https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

张鑫旭 http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

转载于:https://www.cnblogs.com/huangxiaowen/p/6225918.html

pushState 和 replaceState相关推荐

PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
说在前面什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
history的pushState和replaceState
pushState和replaceState HTML5新接口,可以改变网址(存在跨域限制)而不刷新页面,这个强大的特性后来用到了单页面应用如:vue-router,react-router-dom中 ...
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 ...
History 对象的pushState()和replaceState()
今天在看vue-router的时候发现,vue-router源码用到了history.pushState()和history.replaceState(),故,仔细看一下. 一. 概述 window. ...
无刷新跳转—关于history中pushState和replaceState方法详解
〝古人学问遗无力,少壮功夫老始成〞 **关于history中pushState和replaceState方法详解,**常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫 ...
HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一.popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api. 二.过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和sta ...
popstate_H5，API的pushState()，replaceState()和popstate()用法
pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...

pushState 和 replaceState

pushState 和 replaceState相关推荐

最新文章

热门文章