HTML5 History API

最后更新： 2018-01-05

阅读次数： 14 次

许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

History 对象

History 接口定义了一些操作浏览器的历史会话记录的属性和方法。

window 对象的 history 属性可以用来获取当前窗口的 History 对象

• 属性
  • History.length： 一个整数，表示历史记录中会话的数目
  • History.scrollRestoration： 允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）
    • 有具体用法补这里
  • History.state： 返回一个表示历史堆栈顶部状态的值
• 方法
  • History.back()： 返回上一页，等价于 history.go(-1)
  • History.forward()： 前往下一页，等价于 history.go(1)
  • History.go(num)： 通过当前页面的相对位置从浏览器历史记录加载页面（num 可为正数或负数）
  • History.pushState(stateObj, title, url)： 向历史栈中推入一条记录
    • stateObj： 一个对象，通常会存放一些于历史记录相关的数据（当然，你也可以随便放）
    • title： 暂时没啥用，直接写为空字符串
    • url： 一个字符串，表示新历史纪录的地址（为了安全考虑，新 URL 必须和当前 URL 在同一个域名下）
  • History.replaceState(stateObj, title, url)： 用指定记录替换历史栈中的当前记录

// 当前页面： http://blog.percymong.com/pages.html

// 执行下面代码
window.history.pushState(null, null, "?page=3");

// 地址栏被改为： http://blog.percymong.com/pages.html?page=3

pushState 与 replaceState 的异同

• 相同点
  • 函数的参数完全相同
  • 在改动历史栈时都不会使页面刷新
  • 都会更改当前页面的地址栏
  • 都不会出发 popstate 事件
• 不同点
  • pushState 会去除当前页面后面的所有历史记录并将指定的新纪录压入历史栈中，并且会将当前页面地址栏的地址改为最新压入历史栈的地址；而 replaceState 仅仅会更改当前页面地址栏的地址为新地址

popstate 事件

• 通常为 window 对象绑定 popstate 事件
• 触发 popstate 事件的情况
  • 用户手动点击浏览器的前进后退按钮
  • 通过 js 调用 history.back()、history.forward()、history.go() 方法触发

history.pushState(
  {
    name: "percy",
    age: 22
  },
  null,
  "/page1.html"
);

window.onpopstate = function(e) {
  console.log(e.state);
};

popstate 事件的事件对象有一个 state 属性，这个属性和 history.state 的值相同。

实际应用

• 配合 Ajax，无刷新地更改页面地址栏