美文网首页
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