Skip to main content

History 标签历史对象

一、属性​

1、history.length（只读）​

返回历史列表中的网址数。例如，在一个新的选项卡加载的一个页面中，这个属性返回 1。

history.length
// 1

2、history.scrollRestoration​

允许在历史导航上设置默认滚动恢复行为。

返回值：

  • auto：将恢复用户已滚动到的页面位置。
  • manual：未还原页上的位置，用户必须手动滚动到该位置。
// 查看当前页面滚动恢复行为
const scrollRestoration = history.scrollRestoration
if (scrollRestoration === 'manual') {
  console.log('The location on the page is not restored.');
}

// 防止自动恢复页面位置
if (history.scrollRestoration) {
  history.scrollRestoration = 'manual';
}

3、history.state（只读）​

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

下面 log 例句输出 history.state 的值，首先是在没有执行 pushState() 语句进而将值 push 到 history 之前的 log。下面一行 log 语句再次输出 state 值，此时 history.state 已经有值。

console.log(history.state);
// {key: '47d2kb', state: undefined}
// 因为还没有修改 history 栈

history.replaceState({ name: 'Example' }, "pushState example", 'page3.html');
// 现在 push 一些数据到栈里

console.log(history.state);
// {name: 'Example'}

二、方法​

1、history.back()​

window.history.back()

功能：后退返回上一页，如果没有上一页则不执行任何操作。等同于 history.go(-1)

参数：无

示例：

window.history.back();

2、history.forward()​

window.history.forward()

功能：前进到下一页，如果没有下一页则不执行任何操作。等同于 history.go(1)

参数：无

示例：

window.history.forward();

3、history.go()​

window.history.go(number | url);

功能：前进或后退到指定页。

参数：

  • number | url：相对于当前页面你要去往历史页面的位置，可以是数字（负数后退，正数前进）或 url。

示例：

// 后退至前一页，等同于调用 .back()
window.history.go(-1)

// 前进至后一页，等同于调用 .forward()
window.history.go(1)

// 前进两页
window.history.go(2);

// 后退两页
window.history.go(-2);

// 重新加载当前页面
window.history.go();  // 或
window.history.go(0);

4、History.pushState()​

history.pushState(state, title[, url])

功能：按指定名称和 URL 将数据 push 进会话历史栈。

参数：

  • state：状态对象，与 pushState() 创建的新历史记录条目相关联，每当用户导航到新状态时，都会触发 popstate() 事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
  • title：传递空字符串可以防止将来对方法的更改，或者为要移动的状态传递简短的标题。
  • url（可选）：新历史记录条目的 URL 由此参数指定。

示例：

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

history.pushState(state, title, url)

5、History.replaceState()​

history.replaceState(state, title[, url])

功能：仅让 URL 栏显示对应的 url，但不加载或判断对应 url。

参数：

  • state：状态对象，与 pushState() 创建的新历史记录条目相关联，每当用户导航到新状态时，都会触发 popstate() 事件，并且该事件的状态属性包含历史记录条目的状态对象的副本。
  • title：传递空字符串可以防止将来对方法的更改，或者为要移动的状态传递简短的标题。
  • url（可选）：历史记录实体的 URL，新的 URL 跟当前 URL 必须同源，否则 replaceState 抛出一个异常。

示例：

// 下面代码让 URL 栏显示 https://www.leophen.cn/bar2.html
// 但是不会加载 bar2.html 页面，甚至不会检查 bar2.html 是否存在
var stateObj = { foo: "bar" };
history.replaceState(stateObj, "", "bar2.html");