您好,登錄后才能下訂單哦!
pushState中怎么利用Ajax實(shí)現(xiàn)無(wú)刷新頁(yè)面切換,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
一、API
1、pushState
pushState()有三個(gè)參數(shù):一個(gè)狀態(tài)對(duì)象、一個(gè)標(biāo)題(現(xiàn)在會(huì)被忽略),一個(gè)可選的URL地址。
state:與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。
title:空字符串(以后可能有用)。
url:要跳轉(zhuǎn)到的URL地址,不能跨域。
作用:將當(dāng)前URL和history.state加入到history中,并用新的state和URL替換當(dāng)前。不會(huì)造成頁(yè)面刷新。
2、replaceState
history.replaceState()操作類(lèi)似于history.pushState(),不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。
3、window.onpopstate
history.go和history.back(包括用戶(hù)按瀏覽器歷史前進(jìn)后退按鈕)觸發(fā),并且頁(yè)面無(wú)刷的時(shí)候(由于使用pushState修改了history)會(huì)觸發(fā)popstate事件,事件發(fā)生時(shí)瀏覽器會(huì)從history中取出URL和對(duì)應(yīng)的state對(duì)象替換當(dāng)前的URL和history.state。通過(guò)event.state也可以獲取history.state。
二、實(shí)現(xiàn)
場(chǎng)景很簡(jiǎn)單,點(diǎn)擊按鈕下面的div中出現(xiàn)不同的圖片及標(biāo)題,使用ajax刷新,并且產(chǎn)生歷史管理。
<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); } //每次點(diǎn)擊按鈕的時(shí)候就往歷史記錄里面增加一個(gè)條目
注意首次載入的時(shí)候需要首次載入替換一下歷史記錄
(function(){ //默認(rèn)顯示第一頁(yè) var url = location.pathname + '?page=1'; //修改當(dāng)前的歷史記錄 history.replaceState({ url : url },'',url); })()
監(jiān)聽(tīng)window的popstage事件,事件發(fā)生時(shí)取到當(dāng)前歷史對(duì)應(yīng)的頁(yè)碼,然后執(zhí)行ajax
window.addEventListener('popstate',function(){ var page = getPage(); xhr(page); })
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(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)容。