History对象

本文更新于 2020-04-22。

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

2. History 对象提供的方法有：

1. back()：移动到上一个访问页面，等同于浏览器的后退键。

2. forward()：移动到下一个访问页面，等同于浏览器的前进键。

3. go()：接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()。
      history.go(0) 或 history.go()  相当于刷新当前页面。

注意：如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是默默的失败。
注意：返回上一页时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

4. 其中 pushState()、replaceState() 是 HTML 5 新增的方法，用来在浏览历史中添加和修改记录。
判断是否支持 pushState 方法：!!(window.history && history.pushState)

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

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
       如果不需要这个对象，此处可以填null。新页面里可以通过 window.history.state 获取。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域，否则报错（不支持跨域）。浏览器的地址栏将显示这个网址。
     不允许跨域的目的是，防止恶意代码让用户以为他们是在另一个网站上。
     假如设置了一个新的锚点值（即hash），并不会触发hashchange事件。

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

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

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

需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用javascript调用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));
};　

其他

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

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

参考：

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