您好,登錄后才能下訂單哦!
大家都知道瀏覽器有一個(gè)history對(duì)象是用來保存瀏覽歷史的,比如一個(gè)窗口訪問了兩個(gè)個(gè)頁面,那么history.length屬性等于2.
history api在H5時(shí)代新增了兩個(gè)方法,pushState和replaceState
從名字就可以知道一個(gè)是新增一條記錄一個(gè)是改變當(dāng)前那么記錄。
用AJAX加history做分頁的好處就是既提高了用戶體驗(yàn),支持前進(jìn)后退,加快頁面加載速度又對(duì)搜索引擎十分友好
首先我們來判斷瀏覽器是否支持pushState/replaceState
if(!!(windows.history && history.pushState)){ //支持 }else{ //不支持 }
接著我們要給當(dāng)前頁面添加一個(gè)State,添加之前先了解一下這兩個(gè)新方法
pushState和replaceState一樣有三個(gè)參數(shù)
state: 一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對(duì)象,popstate事件觸發(fā)時(shí),該對(duì)象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對(duì)象,此處可以填null。
title:頁面的標(biāo)題,但是目前所有瀏覽器都忽略這個(gè)值,因此這里可以填null/false
url:新的網(wǎng)址,為了防止惡意代碼此處必須與當(dāng)前頁面處在同一個(gè)域。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。
replaceState與pushState不同的地方在于前是修改后者是新增。
那么現(xiàn)在就給頁面添加一個(gè)State:
history.pushState({page:"page_2.html"},"page 2","page_2.html"}
執(zhí)行這個(gè)操作后,瀏覽器URL會(huì)變成 www.website.com/page_2.html,但并不會(huì)進(jìn)行跳轉(zhuǎn),甚至不會(huì)對(duì)這個(gè)地址進(jìn)行檢查是否存在。
于此同時(shí)我們通過ajax加載頁面內(nèi)容,代碼如下
$('a').on("click",function(e){ if(!!(windows.history && history.pushState)){ e.preventDefault() history.pushState({page:"page_2.html"},"page 2","page_2.html"} ajax(page) //ajax代碼就省略了,無非是局部加載內(nèi)容 }else{ //不支持此方法 } })
這樣我們就完成了點(diǎn)擊分頁后添加state和加載頁面內(nèi)容
那當(dāng)用戶點(diǎn)擊前進(jìn)/后退,我們?cè)撛趺崔k?
這時(shí)候就要用到popstate事件。
當(dāng)用戶點(diǎn)擊前進(jìn)/后退或在javascript中調(diào)用history.back/forward/go時(shí)就會(huì)觸發(fā)popstate事件
$(window).on("popstate",function(){ ajax(page) })
這是還要特別注意一下,在webkit瀏覽器中(最新的chrome已經(jīng)改正這個(gè)問題,大概是chrome 20版本之前會(huì)有這個(gè)問題,Safari的高版本沒測(cè)),第一次加載頁面也會(huì)觸發(fā)popstate事件,所以我們也要對(duì)第一次加載進(jìn)行判斷
$(window).on("popstate",function(e){ var first_onload = (e.originalEvent.State == null) if(first_onload){ return false; } ajax(page) })
由于我們對(duì)第一次加載添加了state等于null的判斷,所以我們必須在第一次加載改變state,否則當(dāng)用戶后退到第一個(gè)頁面時(shí)state又等于null,ajax就不會(huì)執(zhí)行,頁面內(nèi)容也無法更新了
history.replaceState({{page:"page_1.html"},"page 1","page_1.html")
這樣一來,整個(gè)代碼就完成了,完整代碼如下
function Pagination(){ $('a').on("click",function(e){ if(!!(windows.history && history.pushState)){ e.preventDefault() var page_url = $(this).attr("page_url")//獲取page信息,根據(jù)你的需要而變 history.pushState({page: page_url},false,page_url) ajax(page_url) //ajax代碼就省略了,無非是局部加載內(nèi)容 }else{ //不支持此方法 } }) $(window).on("popstate",function(e){ var first_onload = (e.originalEvent.State == null) if(first_onload){ history.replaceState({page: window.location.href},page: document.title,page: window.location.href) //給第一次加載改變state,也可以寫到函數(shù)的最后 return false; } var page_url = $(this).attr("page_url")//獲取page信息,根據(jù)你的需要而變 ajax(page_url) }) }
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。