做有态度的前端团队

网易FEG前端团队

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

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

功能介绍

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

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif