zoukankan      html  css  js  c++  java
  • 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

    浏览器兼容性表:

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    replaceState, pushState 5 4.0 (2.0) 10 11.50 5.0
    history.state 18 4.0 (2.0) 10 11.50 6.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)

  • 相关阅读:
    convert image to base64 and post to RESTful wcf
    在android webview实现截屏的手动tounchmove裁剪图片
    How to use jquery ajax and android request security RESTful WCF
    using swfUpload in asp.net mvc
    using HttpClient and sending json data to RESTful server in adroind
    ODP.NET数据访问
    android image watermark
    解决国内不能访问github的问题
    idapro权威指南第二版阅读笔记第九章 交叉引用和绘图功能
    idapro权威指南第二版阅读笔记第二章 逆向和反汇编工具
  • 原文地址:https://www.cnblogs.com/linewman/p/9918562.html
Copyright © 2011-2022 走看看