国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社群

學(xué)習(xí)

工具庫(kù)

AI工具

休閒

繁體中文

javascript - 關(guān)於ajax後退頁(yè)面及歷史記錄的問(wèn)題？

phpcn_u1582 2017-05-19 10:32:59

1009

查了很多資料，似乎都是用ajax局部刷新到另一個(gè)頁(yè)面，即有兩個(gè)html文件，使用window.onpopstate和history.pushState方法保存歷史記錄及回退頁(yè)面。想請(qǐng)問(wèn)下如果用ajax還是在目前頁(yè)面產(chǎn)生資料該怎麼實(shí)現(xiàn)瀏覽器的後退功能？能給個(gè)具體的例子嗎？

phpcn_u1582

全部回覆(1)

洪濤2017-05-19 10:34:59 1樓

ajax與history的相容

ajax的一大痛點(diǎn)就是無(wú)法支援瀏覽器前進(jìn)和後退操作. 因此早期的Gmail 採(cǎi)用 iframe, 來(lái)模擬ajax的前進(jìn)和後退.

如今, H5普及, pjax大行其道. pajax 就是 ajax+history.pushState 組合的一種技術(shù). 使用它便可以無(wú)刷新通過(guò)瀏覽器前進(jìn)和後退來(lái)改變頁(yè)面內(nèi)容.

先看下相容性.

	IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Chrome for Android
pushState/replaceState	10	12	4	5	6	11.5	7.1	4.3	53
history.state	10		4	18	6	11.5

可見(jiàn)IE8,9並不能使用 H5的history. 需要使用墊片 HTML5 History API expansion for browsers not supporting pushState, replaceState .

pjax

pjax簡(jiǎn)單易用, 只需要如下三個(gè)api:

history.pushState(obj, title, url) 表示往頁(yè)面history末尾新增一個(gè)歷史項(xiàng)目(history entry), 此時(shí)history.length會(huì)+1.
history.replaceState(obj, title, url) 表示替換當(dāng)前歷史項(xiàng)為新的歷史項(xiàng). 此時(shí)history.length保持不變.
window.onpopstate 僅在瀏覽器前進(jìn)和後退時(shí)觸發(fā)(history.go(1), history.back() 及l(fā)ocation.href="xxx" 均會(huì)觸發(fā)), 此時(shí)可在history.state中拿到剛?cè)M(jìn)去的state, 即obj物件(其他資料型態(tài)亦可).

我們注意到, 首次進(jìn)入一個(gè)頁(yè), 此時(shí) history.length 值為1, history.state 為空. 如下:

1) 為了在onpopstate事件回呼中每次都能拿到 history.state , 此時(shí)需要在頁(yè)面載入完成後, 自動(dòng)替換下當(dāng)前url.

history.replaceState("init", title, "xxx.html?state=0");

2) 每次發(fā)送ajax請(qǐng)求時(shí), 在請(qǐng)求完成後, 呼叫如下, 從而實(shí)現(xiàn)瀏覽器history往前進(jìn).

history.pushState("ajax請(qǐng)求相關(guān)參數(shù)", title, "xxx.html?state=標(biāo)識(shí)符");

3) 瀏覽器前進(jìn)與後退時(shí), popstate 事件會(huì)自動(dòng)觸發(fā), 此時(shí)我們手動(dòng)取出popstate 事件會(huì)自動(dòng)觸發(fā), 此時(shí)我們手動(dòng)取出 history.state , 建置參數(shù)並重新傳送ajax請(qǐng)求或直接取用state值, 從而實(shí)現(xiàn)無(wú)刷新還原頁(yè)面.

window.addEventListener("popstate", function(e) {
    var currentState = history.state;
    //TODO 拼接ajax請(qǐng)求參數(shù)并重新發(fā)送ajax請(qǐng)求, 從而回到歷史頁(yè)面
      //TODO 或者從state中拿到關(guān)鍵值直接還原歷史頁(yè)面
});

popstate 事件觸發(fā)時(shí), 默認(rèn)會(huì)傳入 PopStateEvent 事件物件. 該物件具有以下屬性.