跳到主要内容

访问窗口历史

利用 History 对象实现访问窗口历史， History 对象是一个只读的 URL 字符串数组。该对象主要用来存储一个最近所访问网页的 URL 地址的列表。

属性额
length历史列表的长度，用于判断列表中的入口数目
current当前文档的 URL
next历史列表的下一个 URL
previous历史列表中的前一个 URL
方法额
back()退回前一页
forward （）重新进入下一页
go()进入指定的页面

例如，利用 History 对象中的 back 方法和 forward 方法来引导用户在页面中跳转 。

 [forward](javascript:window.history.forward();)
//  <a href="javascript:window.history.back();">back</a>

还可以使用 history.go 方法指定要访问的历史记录。若参数为正数，则向前移动；若参数为负数，则向后移动 。

<a href="javascript:window.history.go(-1);">向后退一次 </a>
<a href="javascript:window.history.back(2);">向后前进两次 /a></a>

使用 history.length 属性能够访问 history 数组的长度，可以很容易地转移到列表的末尾 。

<a href="javascript:window.history.go(window.history.length-1);">末尾 </a>

history 对象的方法和属性​

一般，浏览器会记住用户打开网址的历史，并且会在顶部的导航按钮中使用"前进"和"后退"按钮导航历史网址。并且，这个功能也对 JavaScript 开放 API ，使用 JavaScript 的 window.history()方法可以返回一个 history 对象（也可以直接使用 history()调用方法和属性，因为 window 可以省略）。

history （历史）对象指浏览器的浏览历史，使用该对象的方法和属性，就可以自定义前进和后退功能。鉴于安全性的需要，该对象的使用受到很多限制，现在仅定义了下列属性和方法。

length 属性，表示历史的项数​

JavaScript 所能管理的历史被限制在用浏览器的"前进"和"后退"按钮可以前往的范围。本属性返回的值是"前进"和"后退"两个按钮之下包含的地址数的总和。

back()方法​

表示后退，与单击"后退"按钮是等效的。其语法格式如下： history.back([num])

参数 num 是一个整数，表示后退的地址步数。该参数是可选的，如果省略，表示向后倒退一步。

forward()方法​

表示前进，与单击"前进"按钮是等效的。该方法没有参数，其语法格式如下：

history.forward();

go()方法​

可以跳转到特定的一个地址，其语法格式如下：

history.go([location]);

参数 location 可以是一个整数也可以是一个 URL 字符串。如果是一个整数，则表示相对于当前浏览的前进（正数）或后退（负数）的步数；如果是一个字符串，则表示历史列表中的某个 URL 。

如果 location 为 0，则刷新当前打开的网页，这与 location.reload()是等效的；如果 location 为 1，则等同于调用 history.forward()。

例如下面的代码：

<body>
  <input type=" button" value="后退" onclick=" javascript:history.back(-1);" />
  <input type=" button" value="前进" onclick=" javascript:history.forward();" />
  <input type=" button" value="刷新" onclick=" javascript:history.go(0);" />
</body>

技巧与提示​

以上 history 对象的方法，如果找不到要到访的地址也不会出错，只是保持在当前网页。

HTML5BOM 新增功能​

HTML5BOM 定义了两个新方法和一个新属性，用来添加和替换历史项。 pushState()方法添加新的浏览历史项； replaceState()方法更新当前浏览历史项； state 属性用于返回这两个方法添加的信息。这两个方法的语法格式如下：

window.history.pushState(data, title [,url])
window.history.replaceState(data, title [,url])

参数 data 定义历史记录的数据；参数 title 定义历史记录标题；参数 url 可选，定义历史记录的 URL 地址。

这两个方法的执行还会触发 popstate 事件，可以使用下面的代码捕捉：

window.onpopstate = function (event) {
  alert(event.state); // state 属性用于返回这两个方法添加的信息
};

目前这两个方法浏览器尚不支持，事件也不支持。

当使用"前进"、"后退"按钮切换网页时，还会触发 pageshow 事件（当网页成为当前网页时）和 pagehide 事件（当网页从当前网页改变为历史网页时），可以使用下面的代码捕捉：

window.onpageshow = function (event) {
  alert(event.persisted); // state 属性用于返回这两个方法添加的信息
};
window.onpagehide = function (event) {
  alert(event.persisted); // state 属性用于返回这两个方法添加的信息
};

这两个事件对象包含一个名为 persisted 的属性，如果一个网页是新加载的就返回 false ；否则，返回 true 。

历史状态管理​

使用 HTML5 状态管理时，要确保通过 pushState()创建的每个"假" URL 背后 都对应着服务器上一个真实的物理 URL 。否则，单击"刷新"按钮会导致 404 错误。所有 单页应用程序（ SPA ， Single Page Application ）框架都必须通过服务器或客户端的某些配 置解决这个问题。

hashchange 会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。而状态管理 API 则可以让开发者改变浏览器 URL 而不会加载新页面。为此，可以使用 history.pushState()方 法。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL 。

pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相 对 URL 。除了这些变化之外，即使 location.href 返回的是地址栏中的内容，浏览器页不会向服务器发送请求。第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。第一个参数应该包含正确初始化页面状态所必需的信息。为防止滥用，这个状态的对象大小是有限制的，通 常在 500KB ～ 1MB 以内。

let stateObject = { foo: 'bar' };
history.pushState(stateObject, 'My title', 'baz.html');

因为 pushState()会创建新的历史记录，所以也会相应地启用"后退"按钮。此时单击"后退" 按钮，就会触发 window 对象上的 popstate 事件。 popstate 事件的事件对象有一个 state 属性，其 中包含通过 pushState()第一个参数传入的 state 对象。

window.addEventListener('popstate', event => {
  let state = event.state;
  if (state) {
    // 第一个页面加载时状态是 null
    processState(state);
  }
});

可以通过 history.state 获取当前的状态对象，也可以使用 replaceState()并传入与 pushState()同样的前两个参数来更新状态。更新状态不会创建新历史记录，只会覆盖当前状态。

传给 pushState()和 replaceState()的 state 对象应该只包含可以被序列化的信息。因此， DOM 元素之类并不适合放到状态对象里保存。