資訊專欄INFORMATION COLUMN
摘要：代碼在這以上這種不請(qǐng)求頁(yè)面的情況是沒(méi)有歷史記錄的，后退按鈕用不了。增加的事件和可以在這種情況下進(jìn)行歷史記錄的管理。與差不多，就是不添加新的狀態(tài)，而是修改掉當(dāng)前所在記錄的狀態(tài)。
代碼在這
function toggle() {
let value = $("#myRange").val()
$("#output").text(value)
$("#myProgress").val(value)
}
toggle()
$("#myRange").on("change", function () {
toggle()
})
以上這種不請(qǐng)求頁(yè)面的情況是沒(méi)有歷史記錄的，后退按鈕用不了。
H5 API增加的window.history.pushState()、window.onpopstate事件和window.history.replaceState()可以在這種情況下進(jìn)行歷史記錄的管理。
它們管理著一個(gè)狀態(tài)對(duì)象棧和對(duì)應(yīng)的URL，pushState()可以為棧中添加一個(gè)新的狀態(tài)對(duì)象和對(duì)應(yīng)的URL，它們組成了一條記錄，可以用這個(gè)對(duì)象設(shè)置頁(yè)面狀態(tài)。當(dāng)點(diǎn)擊后退按鈕就觸發(fā)onpopstate事件，該事件回調(diào)參數(shù)中有event.state保存著pushState添加的上一個(gè)狀態(tài)對(duì)象，我們用這個(gè)舊的狀態(tài)對(duì)象，就可以讓頁(yè)面恢復(fù)到舊的狀態(tài)中。
replaceState()與pushState()差不多，就是不添加新的狀態(tài)，而是修改掉當(dāng)前所在記錄的狀態(tài)。
還有個(gè)go(n)，跟點(diǎn)擊后退按鈕差不多，就是可以指定后退多少，后退按鈕只能一頁(yè)一頁(yè)退。
let state,initState
window.onpopstate = popState
window.onload = firstTimeLoad
function firstTimeLoad() {
state = {
id:1,
value: $("#myRange").val()
}
initState = Object.assign({},state)
$("#myRange").on("change",changeAction)
display(state)
}
function changeAction(){
state.id++
state.value = $(this).val()
save(state)
display(state)
}
function popState(event){
if(event.state){
state = event.state
display(state)
}else{
display(initState)
}
}
function save(state){
let url = "#history-" + state.id
window.history.pushState(state,"",url)
}
function display(state){
$("#myRange").val(state.value)
$("#output").text(state.value)
$("#myProgress").val(state.value)
}
注意popState(event)方法中的else部分，因?yàn)樵陧?yè)面onload時(shí)瀏覽器本身會(huì)往棧內(nèi)添加第一個(gè)狀態(tài)對(duì)象，這個(gè)對(duì)象是null，棧就會(huì)這樣[null,記錄1,記錄2...]，因此在頁(yè)面加載firstTimeLoad()方法里記錄初始狀態(tài)，好在回退到為null對(duì)象時(shí)，用這個(gè)初始狀態(tài)設(shè)置頁(yè)面。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93851.html
摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對(duì)象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...
摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對(duì)象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...
摘要：首發(fā)前端路由實(shí)現(xiàn)了解新增了兩個(gè)和兩個(gè)都接收三個(gè)參數(shù)狀態(tài)對(duì)象一個(gè)對(duì)象，與用方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)?？紤]到未來(lái)可能會(huì)對(duì)該方法進(jìn)行修改，傳一個(gè)空字符串會(huì)比較安全。該參數(shù)是可選的不指定的話則為文檔當(dāng)前。 首發(fā)：前端路由實(shí)現(xiàn)（history） 了解 HTML5 history新增了兩個(gè)API:history.pushState和history.replaceState 兩個(gè)API都接收三個(gè)...
閱讀 864·2021-09-06 15:02
閱讀 2491·2019-08-30 15:43
閱讀 2264·2019-08-30 11:26
閱讀 2427·2019-08-26 12:12
閱讀 3597·2019-08-23 18:24
閱讀 3336·2019-08-23 18:16
閱讀 750·2019-08-23 17:02
閱讀 2305·2019-08-23 15:34
