• js
  • 简介
  • 基础
  • 操作
🀢

操纵

历史记录

window 对象通过 history 对象提供对浏览器历史记录的访问能力，允许用户在历史记录中自由前进、后退。而在 HTML 中，还可以操纵历史记录中的数据。

在历史记录中后退

实现方法如下：

✂️
js
window.history.back(); //相当于单击"返回"

在历史记录中前进

实现方法如下：

✂️
js
window.history.forward(); //相当于在工具栏点击"前进"

移动到指定历史记录点

可以使用 go() 方法从当前会话的历史记录加载中加载页面。当前页面的索引值为 0 ，上一页就是 -1，下一页就是 1。

✂️
js
window.history.go(1);
window.history.go(-1);

length 属性

使用 length 属性可以了解历史记录栈中一共多少页

✂️
js
var numberOfEntries = window.history.length;

添加或修改记录条目

HTML5新增 history.pushState 和 history.replaceState 方法，允许用户逐条添加和修改历史记录条目。

使用 history.pushState（方法可以改变 referrer 的值，而在调用该方法后创建的 XMLHtpRequest 对象 HTP 请求头中使用这个值。 referrer 的值则是创建 XMLHtpRequest 对象时所处的窗口的 URL 。

这时浏览器的地址栏将显示 http://mysite.com/bar.html，但不会加载 bar.html 页面，也不会检查 bar.html是否存在。

如果现在用户导航到 http://myste.com/ 页面，然后单击后退按钮，此时地址栏将会显示 http://mysite.com/bar.html，并且页面会触发 popstate 事件，该事件中的状态对象会包含 stateObj 的一个拷贝

如果再次单击后退按钮， URL 将返回 http://mysite.com/foo.html ，文档将触发另一个 popstate 事件，这次的状态对象为 null ，回退同样不会改变文档内容。

pushState 方法

pushState 方法包含 3 个参数，简单说明如下∶

  • 第 1 个参数∶状态对象。 状态对象是一个 JavaScript 对象直接量，与调用 pushState 方法创建的新历史记录条目相关联。无论何时用户导航到新创建的状态， popState 事件都会被触发，并且事件对象的 state 属性都包含历史记录条目的状态对象的拷贝
  • 第 2 个参数∶标题。可以传入一个简短的标题，标明将要进入的状态
  • 第 3 个参数∶ 可选参数，新的历史记录条目的地址。 浏览器不会在调用 pushState 方法后加载该地址，不指定的话则为文档当前 URL

调用 pushState 方法，类似于设置 window.location = "#foo" ，它们都会在当前文档内创建和激活新的历史记录条目。但 pushState 有自己的优势

  • 新的 URL 可以是任意的同源 URL ，与此相反，使用 window.location 方法时，只有仅修改 hash 才能保证停留在相同的 document 中
  • 根据个人需要决定是否修改 URL 。相反，设置 window.location='#foo'，只有在当前 hash 值不是 foo 时才创建— -条新历史记录
  • 可以在新的历史记录条目中添加抽象数据。如果使用基于 hash 的方法，只能把相关数据转码成一个很短的字符串

注意， pushState 方法永远不会触发 hashChange 事件。

replaceState （）方法

history.replaceState 与 history.pushState 用法相同，都包含 3个相同的参数。

两者的不同之处在于∶

pushState 是在 history 栈中添加一个新的条目， replaceState 是替换当前的记录值。例如， history 栈中有两个栈块，一个标记为 1，另一个标记为 2，现在有第 3个栈块，标记为 3。当执行 pushState 时，栈块 3将被添加到栈中，栈就有 3个 栈块了。而当执行 replaceState 时，将使用栈块 3替换当前激活的栈块 2， history 的记录条数不变。也就是说， pushState 会让 history 的数量加 1。

为了响应用户的某些操作，需要更新当前历史记录条目的状态对象或 URL 时，使用 replaceState() 方法会特别合适。

popstate 事件

每当激活历史记录发生改变时，都会触发 popstate 事件。如果被激活的历史记录条目是由 pushState() 创建的，或者是被 replaceState() 替换的， popstate 事件的状态属性将包含历史记录状态对象的一个拷贝。

当浏览器记录时，不管单击浏览器工具栏中的前进还是后退按钮，还是使用 JavaScript 的 history.go() 和 history.back() 方法， popstate 事件都会被触发。

读取历史状态

在页面加载时，科恩那个会包含一个非空的状态对象。这种情况是会发生的。例如，如果页面中使用 pushState() 或 replaceState() 方法设置了一个状态对象，然后重启浏览器。当页面重新加载时，页面会触发 onload() 事件，但不会触发 popstate() 事件。但是，如果读取 history.state 属性，会得到一个与 popstate 事件触发一样的状态对象。

可以直接读取当前历史记录条目状态，而不需要等待 popstate 事件：

✂️
js
var currentState = history.state;