Browser 对象(一、history)

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

浏览器兼容性表:

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState54.0 (2.0)1011.505.0
history.state184.0 (2.0)1011.506.0

 

参考:

 

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
 

其他

[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

 

 

posted @ 2017-06-28 15:55 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值