前言

這樣的需求很常見：點擊頁碼局部更新頁面（非整體刷新），并且產生歷史管理。局部刷新很容易實現，ajax可以滿足我們的需要，但是這并不會產生歷史管理，好在html5給我們提供了幾個好用的api方便解決這個問題，見下文。

正文

一、API

1、pushState

pushState()有三個參數：一個狀態(tài)對象、一個標題（現在會被忽略），一個可選的URL地址。
state：與要跳轉到的URL對應的狀態(tài)信息。
title：空字符串（以后可能有用）。
url：要跳轉到的URL地址，不能跨域。

作用：將當前URL和history.state加入到history中，并用新的state和URL替換當前。不會造成頁面刷新。

2、replaceState

history.replaceState()操作類似于history.pushState()，不同之處在于replaceState()方法會修改當前歷史記錄條目而并非創(chuàng)建新的條目。

3、window.onpopstate

history.go和history.back（包括用戶按瀏覽器歷史前進后退按鈕）觸發(fā)，并且頁面無刷的時候（由于使用pushState修改了history）會觸發(fā)popstate事件，事件發(fā)生時瀏覽器會從history中取出URL和對應的state對象替換當前的URL和history.state。通過event.state也可以獲取history.state。

二、實現

場景很簡單，點擊按鈕下面的div中出現不同的圖片及標題，使用ajax刷新，并且產生歷史管理。

p class="page">
  a href="javascript:;">[ span>1/span> ]/a>
  a href="javascript:;">[ span>2/span> ]/a>
  a href="javascript:;">[ span>3/span> ]/a>
  a href="javascript:;">[ span>4/span> ]/a>
/p>
div>
  img />
  p class="title">/p>
/div>

核心代碼

  function setUrl(page){
    var url = location.pathname + '?page=' + page;
    history.pushState({
      url : url
    },'',url);
  }
//每次點擊按鈕的時候就往歷史記錄里面增加一個條目

注意首次載入的時候需要首次載入替換一下歷史記錄

  (function(){
    //默認顯示第一頁
    var url = location.pathname + '?page=1';
    //修改當前的歷史記錄
    history.replaceState({
      url : url
    },'',url); 
  })()

監(jiān)聽window的popstage事件，事件發(fā)生時取到當前歷史對應的頁碼，然后執(zhí)行ajax

  window.addEventListener('popstate',function(){
    var page = getPage();
    xhr(page);
  })

大體的骨架就是這樣。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。