htistory: pushSate、replaceState、popState

概要

pushState、和replaceSate是h5 htistory新增接口,作用是不刷新页面改变url地址。pushState会在当前历史记录栈上新增一条记录，并且history指针指向新增记录。
replaceSate会将当前栈顶的url更改为新增的url，指针不变。
popState是一个window对象监听事件，可以监听浏览器的前进后退事件。

history.pushSate

history.pushState(sate, title, url) 带有三个参数：一个状态对象，一个标题（现在被忽略了,用null代替），以及一个可选的URL地址。
sate参数是一切可以被序列化对象。在popState事件中通过事件对象event.sate获取。
title: 由于大多数浏览器忽略或为实现此参数，所以应该用null代替.
url: 可以是绝对路径和相对路径。绝对路径要保持同源策略规则。

history.replaceSate

函数参数同pushSate

window.onpopState

window.onpopState = function(e) {
console.log(e.state) //用pushSate、replaceSate生成的历史记录页面，才有e.sate,
且e.sate就是pushSate、或replaceSate的第一个参数。
}
replaceSate、pushSate方法不会触发popState事件。用history.back()、history.forward()、history.go()方法、或用户点击前进后退才会触发popSate事件

应用

单页面应用，通过h5 historyApi来改变路由和页面内容。

插件

• pjax: jquery插件，pushSate结合ajax。
• hitsory: 对于不兼容history新接口的浏览器实现history hash方法兼容。

MDN history操作文档
参考