美文网首页
JavaScript之pushState()

JavaScript之pushState()

作者: Cute_小肥鸡 | 来源:发表于2020-08-28 19:05 被阅读0次

    项目需求:通过点击事件,改变浏览器地址栏的URL,但是不刷新页面。

    我的做法:pushState改变地址栏URL,页面不刷新,报错:


    报错

    如何解决???

    //////////////////////////////////////////////////1、公共方法,加载右边的数据
    ////1-1、获取右边页面的数据
    function showPageByUrlParam(currentUrlType,defaultValue){
      var currentURL = window.location.href;
      var splitURL = currentURL.split("/")[4];
      if(defaultValue == "liClick"){/////////////点击左侧栏的LI
        window.history.pushState({},0,currentURL.replace(splitURL,currentUrlType));//无刷新修改地址栏
      }else{/////////////页面刷新的时候
        if(splitURL){
          window.history.pushState({},0,currentURL.replace(splitURL,currentUrlType));//无刷新修改地址栏
        }else{
          window.history.pushState({},0,window.location.href + '/IM');//无刷新修改地址栏
        }
      }
    
      if(currentUrlType == "IM"){//IM
        var ajaxURL = window.contextPath + 'ryunRoom';
      }else if(currentUrlType == "cmail"){//校园邮
        $(".tipLayer").remove();
        var ajaxURL = window.contextPath + 'cmail/Cmail/getcmail';
      }else if(currentUrlType == "file"){//文件
        $(".tipLayer").remove();
        var ajaxURL = window.contextPath + 'webDriver';
      }else if(currentUrlType == "todo"){//待办
        $(".tipLayer").remove();
        var ajaxURL = window.contextPath + 'todo/Todo/getSomeTypeByClickID';
      }else if(currentUrlType == "personalSet"){//个人设置
        $(".tipLayer").remove();
        var ajaxURL = window.contextPath + 'persettings';
      }
    
      //开始请求
      $.ajax({
        type: "POST",
        url: ajaxURL,
        beforeSend: function(){
          tools.loading();
        },
        success: function(data) {
          $(".osContainerRightDoc .inner").html(data);
            tools.loaded();
          },
          error: function(e){
            tools.jumpLogin(e.status);
          }
      });
    }
    ////1-2、获取右边页面的默认数据
    showPageByUrlParam("IM");
    
    
    //////////////////////////////////////////////////2、左侧栏的标签切换
    ////2-1、点击左侧栏的“聊天、校园邮、文件、待办”
    $(document).off("click",".osObjectPanel .homeMenu li.IM,.osObjectPanel .homeMenu li.CMail,.osObjectPanel .homeMenu li.File,.osObjectPanel .homeMenu li.TodoList");
    $(document).on("click",".osObjectPanel .homeMenu li.IM,.osObjectPanel .homeMenu li.CMail,.osObjectPanel .homeMenu li.File,.osObjectPanel .homeMenu li.TodoList",function(){
      var thisParam = $(this).attr('t_t');
      $(".osObjectPanel li").removeClass("on");
      $(this).addClass("on");
      $(this).closest(".osObjectPanel").attr("class","osContainerLeft osObjectPanel stage"+thisParam);
    
      var defaultValue = 'liClick';
      showPageByUrlParam(thisParam,defaultValue);
    });
    

    相关文章

      网友评论

          本文标题:JavaScript之pushState()

          本文链接:https://www.haomeiwen.com/subject/ccqrsktx.html