html5 history api 实现无刷新浏览以及历史记录管理-白红宇

html5 history api 实现无刷新浏览以及历史记录管理

阅读量：6220 次

发布时间：2019-06-21

本文共 1412 字，大约阅读时间需要 4 分钟。


    
        
     
         
         
      
      
          
       
              
        
                  
         
          
           home
          
         
         
          
           about
          
         
         
          
           photos
          
      
        
   
       
      
      
          
       
              
        
         title:
        
      
        
               
         
          url:
         
      
         
                
          
           description:

$(document).ready(function () {   function update (info) {      $(".title").html(info.title);      $(".url").html(info.url);      $(".description").html(info.description);   }   var stateObj = {      home: {         title: "home",         url: "/home",         description: "this is home page"      },      about: {         title: "about",         url: "/about",         description: "this is about page"      },      photos: {         title: "photos",         url: "/photos",         description: "this is photos page"      }   }   $("nav").on("click", "a", {}, function (event) {      var state = event.target.getAttribute("href").replace(/\//, "");      event.preventDefault();      history.pushState(stateObj[state], "", event.target.href);      update(stateObj[state]);   })   window.addEventListener("popstate", function () {      var state = history.state;      update(state);   });   history.pushState(stateObj["home"], "", "/home");   update(stateObj["home"]);})