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