h5之新增的historyAPI介绍

功能介绍

history的HTML5 API可以更改当前页面的url但是不刷新页面，同时将路径记录到历史页面中，可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后，通过后退按钮来回来前一状态，而保证页面不跳转。

API

1、存储当前历史记录点 window.history.pushState(stateObj, title, url)

三个参数：

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

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

• url：新的网址，必须与当前页面处在同一个域，将存入历史记录中，当前页面url也变成这个。

2、替换当前历史记录点 window.history.replaceState(stateObj, title, url)

• 参数意义与上面相同

3、popstate事件

• 监听历史记录点，当history.go()或者浏览器后退前进时触发。

//实例展示

//绑定事件

if (history.pushState) {

window.addEventListener("popstate", function() {

fnHashTrigger();

});

}

//将当前url放进历史记录堆栈中

$('.bar_wrap a').click(function(event) {

var $this = $(this);

var query = $this.data('state');

if (history.pushState && query){

history.pushState(null, "", location.href.split("?")[0] + "?" + query);

}

});

//改变当前url的历史记录

var eleMenus = $('.bar_wrap a');//触发url变化的按钮

var fnHashTrigger = function(target) {

var query = location.href.split("?")[1], eleTarget = target || null;//query获取到url中'？'后面的部分

if (typeof query == "undefined") { 如果没有查询字符，(如http://tx.163.com/m/index.html)则使用第一个导航元素的查询字符内容

if (eleTarget = eleMenus.eq(0)) {

history.replaceState(null, "", location.href + "?" + eleTarget.data('state'));

fnHashTrigger(eleTarget);

}

} else {

eleMenus.each(function() {

if (eleTarget === null && $(this).data('state') === query) {

eleTarget = $(this);

}

});

if (!eleTarget) { // 如果查询序列没有对应的导航菜单，去除查询然后执行回调

history.replaceState(null, "", location.href.split("?")[0]);

fnHashTrigger();

} else {

$(eleTarget).trigger("click");

}

}

};