window.history详细解析

Window.history是什么？

Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口

Window.history的interface

enum ScrollRestoration {
    
     "auto", "manual" };

[Exposed=Window]
interface History {
    
    
  readonly attribute unsigned long length;
  attribute ScrollRestoration scrollRestoration;
  readonly attribute any state;
  undefined go(optional long delta = 0);
  undefined back();
  undefined forward();
  undefined pushState(any data, DOMString unused, optional USVString? url = null);
  undefined replaceState(any data, DOMString unused, optional USVString? url = null);
};

Window.history上的属性

History 接口不继承于任何属性。

1.History.length 只读

返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。

2.History.scrollRestoration

允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

3.History.state只读

返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate (en-US)事件而查看状态的方式

Window.history上的方法 (建议点击超链接看方法详细解答)

History接口不继承任何方法。

1.History.back()

在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注：←)按钮模拟此方法. 等价于 history.go(-1).
 *当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错*

2.History.forward()

在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进(译者注：→)按钮模拟此方法. 等价于 history.go(1).
*当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。*

3.History.go()

通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。
比如：参数为-1的时候为上一页，参数为1的时候为下一页. 
当整数参数超出界限时( 译者注:原文为When integerDelta is out of bounds )，
例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。
调用没有参数的 go() 方法或者参数值为0时，
重新载入当前页面。( 这点与支持字符串作为url参数的IE有点不同)

4.History.pushState()

按指定的名称和URL（如果提供该参数）将数据push进会话历史栈，数据被DOM进行不透明处理；
你可以指定任何可以被序列化的javascript对象。
注意到Firefox现在忽略了这个title参数，

/**
* 该方法接受3个参数
* - state: histroy.state 这个属性，如果你不做任何标识可以传null
* - title: 浏览器标题(现在都不支持，所以都传空字符串''，你可以通过document.title = 'xxxx'去修改)
* - url: 当前要修改的url,新的URL可以是任何和当前URL同源的URL     ps: '/xxxx'
* 该方法会让histroy.length 加一
*/
history.pushState(state, title, url)

5.History.replaceState()

按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。
这个数据被DOM 进行了不透明处理。你可以指定任何可以被序列化的javascript对象。
注意到Firefox现在忽略了这个title参数，

/**
* 该方法接受3个参数
* - state: histroy.state 这个属性，如果你不做任何标识可以传null
* - title: 浏览器标题(现在都不支持，所以都传空字符串''，你可以通过document.title = 'xxxx'去修改)
* - url: 当前要修改的url,新的URL可以是任何和当前URL同源的URL。 ps: '/xxxx'
* 该方法不会让histroy.length 加一，直接替换当前的历史栈      
*/
history.replaceState(state, title, url)