关于在Ajax中使用pushstate

Posted 2020-09-22

     前几天帮同学改了一下一个管理系统前端部分，整个页面布局就是 header 和 footer 固定，左边为导航栏，右边为内容显示栏···  他之前是用iframe来实现的，但是这样导致每次点击导航栏部分都会重新刷新整个页面，每个页面都有很多内容重复，这样显得性能不佳···

    这样一来就必须用到异步刷新了，也就是用 ajax 来加载右边内容栏，用ajax的内容不必多说···对前端有所了解的应该都会了···

    但是ajax同时也有坏处：

     1、 载入页面 与 原页面 共享整个资源，A页面中载入B页面的内容，即如果B页面中也有js代码且变量方法与A中相同 可能也会触发A页面的某些事件，造成冲突，不过幸好之前他的js变量、方法名都是经过特别设置的，我不需要为这个操心···

    2、无法前进后退····  虽然是无刷新操作，但是URL不会改变···

   

 一、pushstate用法  

 幸好H5中加入了pushstate属性，这样就可以轻松实现前进后退了···

语法：

1 history.pushState(state, title, url);

 

     就创建了一个新的由 state, title, 和 url  设定的浏览器历史记录···· 浏览器在调用pushState()方法后不会去加载这个URL，只是将其塞到浏览器历史中。如果你在点击事件中每次都调用pushstate，当换着点击几次之后，你点 前进 后退 会发现URL的地址会随着改变···但是 右边的内容并不会改变····

     pushstate只是改变history 的记录，并不负责记录每个URL的页面内容状态···

 

 二、popstate

      此时就该 popstate 起作用了，每次前进后退都会触发popstate事件，所以可以通过绑定popstate事件，就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入，实现Ajax的前进与后退效果。  当然还有个  history.replaceState方法，它与pushstate类似，不过是改变当前URL，并不会塞到浏览器历史中···可以在页面刚载入的时候使用这个方法···

 

三、代码示例

   点击事件

 

 1 var eleMenus = $(".left a").click(function(e){
 2      e.preventDefault();
 3 
 4   if(history.pushstate) 
 5 {   /*   ajax载入~~  */  
 6   
 7    var title = $(this).text(); 
 8 
 9  document.title=title; 
10 
11  if (event && /\d/.test(event.button)) 
12 {  history.pushState({title:title},title,"?"+this.href.split("/")[3]); /*这里要判断一下到底是触发点击事件，还是鼠标点击事件，不然会成死循环*/   }  } 
13 
14  return false;  
15 }）

 

 

 

 

popstate事件

 

   

 1 var  pageTrigger= function(target) {
 2     
 3     var query=location.href.split(‘?‘)[1], eleTarget = target || null; 
 4     if(typeof query == "undefined") {
 5         if(eleTarget=eleMenus.get(1)) {
 6             history.replaceState(null, document.title, location.href.split("#")[0] +"?"+eleTarget.href.split("/")[3] );  
 7             console.log(eleTarget.href);
 8             pageTrigger(eleTarget);  //直接触发click事件
 9             
10         } 
11      }
12     else {
13         eleMenus.each(function(){ 
14               //为popstate 事件准备的····
15 
16            if (eleTarget === null && this.href.split("/")[3] === query) {
17               eleTarget = this;//popstate到之前的页面，必须要触发相应的点击事件，所以确定是那个a元素
18           }
19       });  
20 
21          if (!eleTarget) {  //如果当前元素仍不存在,利用replaceState 将初始页面换到当前url，再次调用 从头开始
22 
23             history.replaceState(null, document.title, "base.html");    
24             pageTrigger();
25         } else {
26              console.log(eleTarget);
27              $(eleTarget).trigger("click");
28         }
29     
30 
31    }
32 }
33 if (history.pushState) { //如果浏览器支持history的pushstate属性,在前进后退的时候直接触发pageTrigger事件
34     window.addEventListener("popstate", function() {
35         pageTrigger();   
36                                                              
37     });  
38     // 默认载入
39     pageTrigger();
40 }

 

   现在有 jquery ajax + pushstate 的插件=pjax，pjax是一种基于ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。pjax是ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。