history

一、简单介绍 history 中的操作

　　　　1.window.history.back()，后退

　　　　2.window.history.forward()，前进

　　　　3.window.history.go(num)，前进或后退指定数量历史记录

　　　　4.window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。

　　　　　　参数：　　state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。

　　　　　　　　　　　title：历史记录的标题。

　　　　　　　　　　　url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

　　　　　　接收url的参数为string类型,用以改变当前地址栏的url.需要注意的一点就是这个参数不能和跨域，即协议，域名，端口必须都是相同的，如果出现跨域的情况，即会提示：

　　　　　　

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.baidu.com/' cannot be created in a document with origin 'http://commanderXL.com' and URL 

 

　　　　5.window.history.replaceState(state, title, utl)，修改当前的 history 实体。

　　　　顾名思义，两个方法的区别只是pushState添加一个最新的历史记录，而replaceState则是把当前的页面的历史记录替换掉。他们最大的特点是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。

　　　　6.popstate 事件，history 实体改变时触发的事件。

　　　　7.window.history.state，会获得 history 实体中的 state 对象。

　　二、使用方法

　　　　取消默认的返回操作：

　　　　1.添加一条 history 实体作为替代原来的 history 实体

function pushHistory(){
  var state = {
       title: "title",
       url: "#"     
    }
  window.history.pushState(state, "title", "#");   
}

pushHistory()

　　　　2.监听 popstate 事件

　　　　这个方法用以监听浏览器在不同历史记录中进行切换，而触发相应的事件。在浏览器提供的history对象上还有go, back方法，用以模拟用户点击浏览器的前进后退按钮。在某个web应用当中，比如点击了<a>标签，发生了页面的跳转。这时调用history.back();方法后页面回退，同时页面发生刷新,这时window.onpopstate无法监听这个事件。但是如果是通过pushState或者replaceState来改变URL且不发生浏览器刷新的话，再使用history.back()或history.go(),这样popstate事件会被触发。

window.addEventListener("popstate", function(){
    //doSomething
}, false)

　　三、注意事项

　　　　1.每次返回都会消耗一个 history 实体，若用户选择取消离开，则需要继续 pushState 一个实体

　　　　2.pushState 只能一个实体，多个实体返回会出错。使用 window.history.state 查询是否存在添加的实体。