跳到主要内容

操纵

历史记录

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

在历史记录中后退​

实现方法如下：

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

在历史记录中前进​

实现方法如下：

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

移动到指定历史记录点​

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

window.history.go(1);
window.history.go(-1);

length 属性​

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

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 事件：

var currentState = history.state;