前言
這樣的需求很常見:點擊頁碼局部更新頁面(非整體刷新),並且產生歷史管理。局部刷新很容易實現,ajax可以滿足我們的需要,但是這並不會產生歷史管理,好在html5給我們提供了幾個好用的api方便解決這個問題,見下文。
正文
一、API
1、pushState
pushState()有三個參數:一個狀態對象、一個標題(現在會被忽略),一個可選的URL地址。
state:與要跳轉到的URL對應的狀態信息。
title:空字符串(以後可能有用)。
url:要跳轉到的URL地址,不能跨域。
作用:將當前URL和history.state加入到history中,並用新的state和URL替換當前。不會造成頁面刷新。
2、replaceState
history.replaceState()操作類似於history.pushState(),不同之處在於replaceState()方法會修改當前歷史記錄條目而並非創建新的條目。
3、window.onpopstate
history.go和history.back(包括用戶按浏覽器歷史前進後退按鈕)觸發,並且頁面無刷的時候(由於使用pushState修改了history)會觸發popstate事件,事件發生時浏覽器會從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); })()
監聽window的popstage事件,事件發生時取到當前歷史對應的頁碼,然後執行ajax
window.addEventListener('popstate',function(){ var page = getPage(); xhr(page); })
大體的骨架就是這樣。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。