H5 History 介绍

history

在 DOM 中,window 对象中有个 history 对象可以用来访问浏览器的历史记录;在HTML5中,更可以通过它来操作历史记录

API

back()

返回上一个访问页,与浏览器的后退按钮功能一样

1
history.back(); //回退

forward()

向前访问新的防问页,与浏览器的前进按钮功能一样

1
history.forward(); // 前进

go()

传递一个数字(正数代表前进,负数代表回退),加载相对于当前页的指定页面(当前历史记录中)

go(-1)back() 的区别在于前者会丢失原页面表单内容

不同浏览器对于 go(-1) 的表现不一致,Chrome、Firefox 会刷新回退后的页面并重新请求数据,而 Safari 只会回退到原页面但不做任何操作

1
2
3
history.go(1); //前进一页
history.go(0); // 刷新当前页
history.go(-2); // 回退两页

length

返回历史记录的长度

pushState()

1
pushState(stateObj, title, URL);

state object:与新的历史记录关联的可序列化对象,大小限制为 640k 字符,超过最大限制会抛异常

title:新页面标题,目前不支持;建议传空字符,防止以后该方法发生改变

URL:可选参数,新历史记录路径;可以是相对路径,也可以是绝对路径,但必须同源;如果不传,则默认是当前页面路径

也可以通过 hash 来实现添加历史记录且不刷新页面,也有对应伪 URL 相关数据

两者对比,pushState 有一定的优势

1、使用 hash 方式,如果不改变 hash 则不会产生新的历史记录,也不会触发 onhashchange 事件;而 pushState 即使插入的是相同 URL,也会产生新的历史记录

2、使用 hash 方式,需要将传输数据编码为字符串;而 pushState 可以传递任何类型数据

replaceState()

replaceState()pushState() 基本一致,不用的是,前者是修改历史记录,后者是创建新的历史记录

popstate event

PopStateEvent 包含当前页面的 state

浏览器的回退和前进操作会触发该事件,但是 pushState()replaceState() 不会触发

1
2
3
window.onpopstate = (event) = > {
console.info(event.state);
}

其他