html5 pushstate用法,h5中history.pushState的用法

h5中提供了不修改页面内容只修改地址栏的api，pushState(添加浏览历史),replaceState(修改当前浏览历史)，popState事件在用户返回或前进进会被出发触发

history.pushState方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据

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

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

popState的触发

仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

此事件可以添加一个回调函数，函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state

判断浏览器是否支持这些api,并添加一些记录,如下添加三个if (!!(window.history && history.pushState)) {

// 支持History API

history.pushState('#1', null, '#1');

history.pushState({ a: 1, b: 2 }, null, '#2');

history.pushState('#3', null, '#3');

window.onpopstate = function(event) {

console.log('location: ' + document.location);

console.log(event.state);

};

//另一种添加事件的方法

window.addEventListener('popstate', function(event) {

console.log('location: ' + document.location);

console.log(event.state);

});

}

页面加入上面代码后打开页面地址后面会跟一个#3，当第一次点返回按钮时会输出如下值，并且页面url变成 #2

如果这个时候再前进则会输出如下

这个时候地址栏里是 #3

也就是说popstate事件发生时event里是和当前url匹配的一些数据