History in Js

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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容