History 对象介绍

Question

HTML5 使用 history 对象 history.pushState() 和 history.replaceState() 方法添加和修改浏览历史记录，这里。

History 对象提供的方法有：

• back()：移动到上一个访问页面，等同于浏览器的后退键。
• forward()：移动到下一个访问页面，等同于浏览器的前进键。
• go()：接受一个整数作为参数，移动到该整数指定的页面，比如 go(1) 相当于 forward()，go(-1)相当于 back()。history.go(0) 或 history.go() 相当于刷新当前页面。
• 注意：如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。
  注意：返回上一页时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。
• 其中 pushState()、replaceState() 是 HTML5 新增的方法，用来在浏览历史中添加和修改记录。判断是否支持 pushState 方法：!!(window.history && history.pushState)

history.pushState(object state, string title, string url) 方法能实现在不刷新页面的情况下修改浏览器 url 链接，并且该方法创建了新的浏览记录，并将新的链接插入到浏览记录队列中。

• state：一个与指定网址相关的状态对象，popstate 事件触发时，该对象会传入回调函数。
  如果不需要这个对象，此处可以填 null。新页面里可以通过 window.history.state 获取。
• title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 null。
• url：新的网址，必须与当前页面处在同一个域，否则报错（不支持跨域）。浏览器的地址栏将显示这个网址。不允许跨域的目的是，防止恶意代码让用户以为他们是在另一个网站上。假如设置了一个新的锚点值（即 hash），并不会触发 hashchange 事件。

总之，pushState 方法不会触发页面刷新，只是导致 history 对象发生变化，地址栏会有反应。

history.replaceState 方法的参数与 pushState 方法一模一样，区别是它修改浏览历史中当前纪录。

popstate 事件：

每当同一个文档的浏览历史(即 history 对象)出现变化时，就会触发 popstate 事件

需要注意的是，仅仅调用 pushState 方法或 replaceState 方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JS 调用 back()、forward()、go() 方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

// event.state，就是通过 pushState 和 replaceState 方法，为当前 URL 绑定的 state 对象，可以通过 history.state 获取
window.onpopstate = function (event) {
  console.log('location: ' + document.location)
  console.log('state: ' + JSON.stringify(event.state))
}

其他

获取 URL， 从输出结果上，document.URL 和 windows.location.href 没有区别。 非要说区别的话，你只可以读取 document.URL 的值，不能修改它。windows.location.href 的值你即可以读取也可以修改。 windows.location.href 是旧的写法，新的标准推荐用 document.URL 替代。（如果你只是读取的话）

document.location.href
window.location.href
document.URL // 只读

参考

• javascript History 对象详解。
• history 禁用浏览器的后退功能（包括其他操作后退的按钮，操作等）。