javascript History对象原理解析

这篇文章主要介绍了javascript History对象原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

length

　　history.length属性保存着历史记录的URL数量。初始时，该值为1。由于IE10+浏览器在初始时返回2，存在兼容性问题，所以该值并不常用

跳转方法

　　go()、back()和forward()

　　如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

　　[注意]使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。不触发onload

增改记录

　　HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录。state属性用来保存记录对象，而popstate事件用来监听history对象的变化

　　[注意]ie9不支持

　【pushState()】

　　　　history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址

　　　　history.pushState(state, title, url);

　　　　state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null

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

　　　　URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL

　　　　假定当前网址是example.com/1.html，使用pushState方法在浏览记录(history对象)中添加一个新记录

var stateObj = { foo: 'bar' };history.pushState(stateObj, 'page 2', '2.html');

　　　　添加上面这个新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。假如这时访问了google.com，然后点击了倒退按钮，页面的url将显示2.html，但是内容还是原来的1.html。再点击一次倒退按钮，url将显示1.html，内容不变

　　　　总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化

　　　　如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，，即使新的URL和旧的只在hash上有区别

　　　　如果设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上