HTML5的history API和浏览器历史记录管理

作者: 瑶一瑶日期: 2016-08-05

190417

之前的天下手游移动官网还有一个功能就是左右切换页面内容时

功能介绍

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");
        }       
    }   
};