Browser 对象(一、history)-CSDN博客

本文链接：https://blog.csdn.net/liNewman/article/details/86576317

Browser 对象(一、history)

history对象包含用户在浏览器窗口中访问过的URL

history对象是window对象的一部分，也就是说可以window.history进行访问

1、history对象的属性（length）

console.log(history.length);

通过history.length直接返回浏览器历史列表中URL的数量

2、history对象的方法back()

history.back();

<a href="javascript:history.back();">返回上一页</a>

<input type="button" value="返回上一页" onclick="returnBack()"/>
<script>
   function returnBack(){
       history.back();
   }
<script>

通过调用history.back()方法加载当前URL在浏览器历史列表中的前一个URL
3、history对象的方法forward()

history.forward();

通过调用history.forward()方法加载当前URL在浏览器历史列表中的下一个URL

4、history对象的方法go()

(1)、当传入参数为num时

history.go(-1);//加载前第一个URL
history.go(-2);//加载前第二个URL
history.go(1);//加载下第一个URL
history.go(2);//加载下第二个URL

通过调用history.go()方法加载当前URL在浏览器历史列表中的第 num 个URL

(2)、当传入字符串时

history.go('baidu.com');

通过调用history.go()方法加载离当前URL在浏览器历史列表中最近的带有‘baidu.com’字符串的URL

注意：在浏览器的历史列表中必须存在你访问的URL（例如：页面刚打开，浏览器历史列表中只有当前一个URL，你现在加载他的前一个或者后一个，甚至前两个或者后两个都不会有效果），代码才会执行，否则没有效果。也就是说你加载的URL在历史列表中必须存在，才能访问。

5.history对象的方法pushState()

pushState()是浏览器新添加的方法，作用是history.pushState()方法向浏览器历史添加一个状态，他的出现，是我们更加方便的解决了页面的无刷新操作，也就是pjax = pushState() + ajax

<script>
$(function(){
        var $body = $('body');

//导航点击事件
        $body.find('.module-group').on('click','.module-cell',function(){
            //点击切换高亮显示
            $body.find(this).addClass('on').siblings().removeClass('on');//后边做ajax请求页面的数据
            //设置title
            var title = "年中大促" + $(this).text();
            document.title = title;
            //在列表中插入参数URL
            history.pushState({ title: title }, title, location.href.split("?")[0] + "?param=" + $(this).index());
        });
    });
</script>

实例：我们在pc端常见的分页方法，因头部等大部分都是相同的，所以我们分页的时候基本采用ajax请求来完成产品的替换，作用是为了减少页面的加载。这也就是无刷新操作。但是他会出现一个很严重的问题（由于页面没有重新加载，浏览器URL历史中在每次下一页后是不会新添加的URL，因为只是局部刷新，所以不会添加新的URL，这就导致了，浏览器的返回上一页功能不能使用），pushState()方法就提供了我们点击分页，添加一个新的参数不同得URL在历史列表中。

在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。

语法：history.pushState(state, title, url);

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

6.window.onpopstate事件

pushState()方法只是添加了URL，但是没有监听到浏览器的前进、后退按钮的行为，window.onpopstate就是解决这个问题的。

<script>
if (history.pushState) {
        window.addEventListener("popstate", function() {
            reloadFn();
        });

        // 默认载入
        reloadFn();
    }
</script>

window.onpopstate是popstate事件在window对象上的事件处理程序.

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

语法：window.onpopstate = fun;

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate

7.history对象的replaceState()方法

replaceState()的作用就是更改浏览器历史列表的当前URL，页面不会刷新

var eleMenus = $(".module-group .module-cell");
    var reloadFn = function(target) {
        var param = location.href.split("?")[1], eleTarget = target || null;
        if (typeof param == "undefined") {
            if (eleTarget = eleMenus.get(0)) {
                // 如果没有查询字符，则使用第一个导航元素的查询字符内容
                history.replaceState(null, document.title, location.href.split("#")[0] + "?param=0");
                reloadFn(eleTarget);
            }
        } else {
            eleMenus.each(function() {
                if (eleTarget === null && $(this).hasClass('on')) {
                    eleTarget = this;
                }
            });

            if (!eleTarget) {
                // 如果查询序列没有对应的导航菜单，去除查询然后执行回调
                history.replaceState(null, document.title, location.href.split("?")[0]);
                reloadFn();
            } else {
                var num = parseInt(param.split("=")[1]);
                eleMenus.removeClass('on').eq(num).addClass('on');
            }
        }
    };

语法：history.replaceState(state, title, url);

jquery.pajx.js下载：

http://download.csdn.net/detail/m0_38082783/9883724

浏览器兼容性表：