HTML5 History对象，Javascript修改地址栏而不刷新页面

Posted 2020-08-08 天马3798

一、实例说明：

$(\'#btnOne\').click(function () {
    var stateObject = { id: 1 };
    var title = "本地首页";
    var newUrl = \'/index.html\';
    //修改地址栏中的地址
    /*
    * 使用说明，pushState中缓存的地址，必须是当前域中的地址
    */
    history.pushState(stateObject, title, newUrl);
});
$(\'#btnTwo\').click(function () {
    //获取操作历史记录
    console.info(history.length);
});
window.addEventListener(\'popstate\', function (event) {
    console.info(event);
    console.info(event.state);
    /*
    * event.state.id 获取说明，第一次打开页面没有id，会抛出异常
    */
    console.info(event.state.id);
});

测试结果：IE10及以上浏览器支持，Google，FF支持

HTML5 History 一：http://www.cnblogs.com/tianma3798/p/5584541.html