h5 history简单介绍

history对象

浏览器history对象用来保存一些浏览历史记录。history.length=5表示当前窗口有五个访问记录。

备注：浏览器历史记录的记录方式
   1）直接在地址栏输入网页地址； 
   2）通过网页内的超链接点击，跳转到其它网页；但是不能是在新窗口中打开的链接； 
   3）通过脚本改变location.href跳转到其它网页； 
   4）通过表单提交跳转到其它网页；但是不能是提交到新窗口的表单。 
   5）网页锚点的变化，也会导致历史记录栈的更新，特性与前文描述相同。
   只要在同一窗口内部发生跳转

注释1:当我们通过前面列举的方式改变网页地址的时候，都会把新的页面压入到历史记录栈的顶部，同时把指针指向到这个最新的网页
注释2:浏览器在往历史记录栈里面压入新的记录时，是直接在当前指针后面压入的，如果当前指针的后面，还有其它的记录项，都会被丢弃掉

history对象提供了一系列方法

（1）back()返回上一个页面
（2）forward()前进到下一个页面
（3）go(index)接收参数index,指跳转到第几个访问页面中。如果超出history.length则会报错
*点击查看demo
测试history

h5新添加pushState、replaceState

（1）history.pushState()在浏览记录里添加记录
（2）history.replaceState()在浏览记录修改记录

这两个方法用法几乎一致。
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

*点击查看demo
测试history

popstate事件

同一窗口的浏览历史出现变化(history对象),会触发popstate事件.
注意1:调用pushState方法或replaceState方法，不会触发该事件。只有浏览器的前进后退按钮和history的go,back,forward会触发

popstate事件的回调函数是个event对象,它的state属性指向pushState和replaceState方法的第一个参数
注意2:页面第一次加载的时候，在load事件发生后，Chrome和Safari浏览器（Webkit核心）会触发popstate事件，而Firefox和IE浏览器不会

onhashchange事件

每当锚点发生变化的时候，主流浏览器会触发window对象的onhashchange事件

window.onhashchange = function(event) {
    console.log(event.oldURL);
    console.log(event.newURL);
    console.log(location.hash);
};
event.oldURL返回锚点变化前的完整浏览器地址； 
event.newURL返回锚点变化后的完整浏览器地址； 
location.hash返回锚点变化后页面地址中的锚点值。