概要
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来改变路由和页面内容。