H5,API的pushState(),replaceState()和popstate()用法

Posted JoeJoan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5,API的pushState(),replaceState()和popstate()用法相关的知识,希望对你有一定的参考价值。

pushState和replaceState是H5的API中新添加的两个方法。通过window.history方法来对浏览器历史记录的读写。

pushState和replaceState

html 文件中, history.pushState() 方法向浏览器历史添加了一个状态。 
pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。

  • state object — 状态对象是一个由 
    pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。)state 
    对象可以是任何可以序列化的东西。由于 火狐 
    会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k 
    的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 
    的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。
  • title — 
    火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)
  • URL — 
    这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后。新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则,pushState() 
    将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。

一些情况下,调用pushState和设置 window.location = “#foo”相当,这种状况下,这两种行为都会创建和激活另一个和当前页面有关的历史纪录。但是pushState()有其他优势:

新URL可以是当前URL同源下的任意地址。相反的,设置window.location会让你保持在相同页面,除非你只修改hash. 
如果不必要,你可以不改变URL,相反的,将window.location设定为“#foo”;只会创建一个新的历史纪录,如果当前hash不为#foo. 
You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以关联任意的数据到你的新历史纪录中。使用基于hash的方法,你需要将所有相关 的数据编码为一个短字符串。

请注意pushState()方法绝不会导致hashchange 事件被激活,即使新的URL和旧的只在hash上有区别。

语法

pushState()和replaceState()参数一样,参数说明如下:

history.pushState(state, title, url);
  • state:存储JSON字符串,可以用在popstate事件中。

  • title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替

  • url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

两个方法的主要区别:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。

popstate

当前活动历史项(history entry)改变会触发popstate事件。调用history.pushState()创建新的历史项(history entry),或调用history.replaceState()替换新的历史项(history entry),那么popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在javascript代码中调用history.back())

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

当浏览器触发返回和前进时触发:

window.onpopstate = function(e) {

       console.log(e.state);
   };

参考:https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

 











以上是关于H5,API的pushState(),replaceState()和popstate()用法的主要内容,如果未能解决你的问题,请参考以下文章

基于H5 pushState和Ajax完美实现页面局部刷新

ajax与HTML5 history pushState/replaceState实例

h5公众号开发常见问题之无法返回

历史 API pushState() 创建两个条目

react-router3

使用 HTML5 History API 的好教程(Pushstate?)[关闭]