History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
History 对象属性
属性 | 描述 |
---|---|
length | 返回浏览器历史列表中的 URL 数量。 |
History 对象方法
方法 | 描述 |
---|---|
back() | 加载 history 列表中的前一个 URL。浏览器后退键 |
forward() | 加载 history 列表中的下一个 URL。浏览器前进键 |
go(n) | 加载 history 列表中的某个具体页面。 |
//跳转,n>0 前进n步;n<0 后退n步;n=0 刷新本页;
history.go(1); //===forward(); 前进1步
history.go(-1); //===back(); 后退1步
history.go(); //===go(0) , 刷新本页
以上跳转超过历史记录边界,静默失败。
HTML5 History API 增加
只增加2个方法1个事件1个属性,IE9-浏览器不支持
2个方法: history.pushState()
history.replaceState()
方法 | 描述 |
---|---|
pushState() | 向浏览器历史添加一个记录。产生新的记录,不会触发页面刷新,只是导致history对象发生变化,地址栏的显示地址发生变化 |
replaceState() | 与pushState唯一区别,替代URL,不新生成历史记录 |
方法:
history.pushState(state, title, url);
-
state object
:状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象,此处可以填null -
title
:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null -
URL
: 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL
//eg.
var state = { 'page_id': 1, 'user_id': 5 };
var url = '?showPage=1';
history.pushState(state, "", url);
1个事件:window.onpopstate
只有点击浏览器的“前进”、“后退”这些导航按钮,或者是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同一个网页文档,才会触发本事件。前2个方法第一个参数传入的state
,也会在事件参数中event.state
。
//监听事件
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};
注意:history.pushState()
及history.replaceState()
本身调用时是不触发popstate事件的。
1个属性:history.state
返回当前history记录的state,由前2个方法history.pushState()及history.replaceState()
传入。
let state = history.state; //# state: { 'page_id': 1, 'user_id': 5 }
兼容性
HTML5新增的history方法IE10+及其他主流浏览器都支持HTML5 history API
可进行其API代码判断。
var isHistoryApi = !!(window.history && history.pushState);