JavaScript：window.history

[smileyby]

History API

DOM window 对象通过 history 对象提供了对浏览器会话历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时---从HTML5开始，提供了对 history 栈中内容的操作。

window.history 是一个只读属性

方法

• back()
  • 在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作
• forward()
  • 在会话历史中下年移动一页。它与使用 history.go(-1)的效果相同
• go()
  • 语法：window.history.go(delta)
  • 参数：delta，相对于当前页面你要去往历史页面的位置，负值向后移动，正值向前移动（history.go(2) 向前移动两页，history.go(-2)向后移动两页。如果未向该函数传参或delta == 0，则改函数与调用 location.reload() 具有相同效果）
• pushState()
  • 语法：history.pushState(state, title[, url]);
  • 参数：
    • state：状态对象
    • title
    • url（可选）：指定新历史记录条目的URL，新网址必须和当前地址同源，否则会抛出异常，如果未指定，则将其设置为当前页面URL
  • history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态
  • pushState 不会触发 haschange 事件
• replaceState()
  • 语法：history.replaceState(state, title[, url])
  • 参数：
    • state：状态对象
    • title
    • url（可选）：历史记录实体的URL，新的URL跟当前的URL必须是同源，否则replaceState会抛出一个异常（同源：协议相同、域名相同、端口相同）
  • history.replaceState() 修改当前历史记录实体，如果你想更新当前的 state对象或者 当前历史实体的URL来相应用户的动作的话这个方法将非常有用

popstate：每当处于激活状态的历史条目发生变化时，popstate事件就会在window对象上触发

注意：history.pushState() 或 history.replaceState() 不会触发 popstate事件，popstate时间只会在浏览器某些行为下触发，比如点击后退、前进按钮（或者调用 history.back()、history.forward()、history.go()方法）,此外，a标签的锚点也会触发该事件

当网页加载时，各个浏览器对 popstate 事件是否触发有不同表现，Chrome和Safari会触发 popstate事件，而Firefox不会

属性

• length
  • window.history.length：可通过此属性查看历史堆栈中页面的数量