window.history详解

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

 

History 对象属性

length:返回浏览器历史列表中的 URL 数量。

 

History 对象方法

back()：加载 history 列表中的前一个 URL。即后退

forward():加载 history 列表中的下一个 URL。即前进

go():加载 history 列表中的某个具体页面。这个是最常用的

 

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。

 

咱们来接着说两个HTML5 history新增的好哥们：History.pushState()和History.replaceState()

 

history.pushState(state, title, url)

意思就是把一个history记录插入到历史记录中。

state：与要跳转到的URL对应的状态信息。

title：页面标题。

url：要跳转到的URL地址，不能跨域。

 

history.replaceState(state, title, url)

用新的state和URL替换当前。不会造成页面刷新。

state：与要跳转到的URL对应的状态信息。

title：页面标题。

url：要跳转到的URL地址，不能跨域。

 

window.onpopstate

history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

 

大致的思路就是自己创建一个对象记录，然后把它插入到浏览器的历史记录，点击浏览器的前进后退按钮会触发onpopstate，然后判断当前的记录做对应的操作。

 

与传统的AJAX的区别

传统的ajax有如下的问题：

虽然ajax可以无刷新改变页面内容，但无法改变页面URL

其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题

有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变

再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的

 

为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState

可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

 

注意事项：

1、onpopstate只有在点击浏览器的前期和后退才会触发；

2、pushState能够改变浏览器地址栏中的hash，但是它不会触发hashchange事件，所以想通过监听hashchange来执行是无效的。

3、pushState不会刷新页面，刷新页面咱就压根不会用它了。