資訊專欄INFORMATION COLUMN
摘要：背景最近在上班過程中，遇到了這么一個需求，在多頁面應用中，需要在幾個頁面上共用同一個數(shù)據(jù)來源，且切換頁面不刷新頁面數(shù)據(jù)，并能實現(xiàn)歷史記錄的后退功能因前期只考慮在一個頁面內(nèi)實現(xiàn)多個頁面的效果，并未考慮到歷史記錄堆棧中的處理，導致頁面會一次性推
背景
最近在上班過程中，遇到了這么一個需求，在多頁面應用中，需要在幾個頁面上共用同一個數(shù)據(jù)來源，且切換頁面不刷新頁面數(shù)據(jù)，并能實現(xiàn)歷史記錄的后退功能；因前期只考慮在一個頁面內(nèi)實現(xiàn)多個頁面的效果，并未考慮到歷史記錄堆棧中的處理，導致頁面會一次性推出入口，以下為總結的幾種解決方法。
hash在URL中，#我們稱為位置標識符，代表網(wǎng)頁的一個位置，在我們剛開始接觸到a標簽的時候，我們很多人都有操作過錨點跳轉，主要就是通過在 href 中設置想要跳到的位置的id值，在這個過程中，頁面是沒有刷新的，但歷史記錄卻新增了一條；我們利用window.location.hash可以取得當前頁面的hash值，同時也可以也可以通過其寫入新的hash值，并通過監(jiān)聽hashchange事件，來檢測hash值是否發(fā)生了改變。當我們再點開彈框式的遮罩頁面的時候，可以手動的去修改location.hash的值，這樣點擊window.history.back()，就可以實現(xiàn)歷史記錄回退；
例子代碼如下：
Title
加載中....
在瀏覽器中打開該頁面，并在路由上加上#blue,如下：
可看到如下頁面，初始條件下，頁面的顯示加載中...，而后定時器觸發(fā)更新，顯示遞增的數(shù)字，此時我們可以在控制臺中打印出對應的history.length,其值為2：
接下來，我們通過點擊change-url 按鈕，去實現(xiàn)修改hash值，我們可以看到，對應的路徑發(fā)生了改變，#blue變?yōu)?g"ra，背景顏色也對應的更改，但此時遞增的數(shù)字沒有被刷新，說明我們的頁面并沒有經(jīng)過刷新重載的過程。
重新在控制臺輸入window.history.length可以看到，其值已經(jīng)變?yōu)?，點擊瀏覽器后退箭頭，頁面背景改為之前的藍色背景，到這里，我們就實現(xiàn)我們想要的功能；
history.pushState除了上面講到的方法外，通過html5新增的history.pushState也可以實現(xiàn)同樣的效果；
history.pushState和history.replaceState同是html5新增的api，都可以實現(xiàn)改變狀態(tài)欄的url而不刷新頁面，但兩者的區(qū)別是，replaceState是替換當前地址為指定的url，而pushState則是創(chuàng)建一條新的歷史紀錄。執(zhí)行history.back()和history.forward()后會觸發(fā)window.onpopstate事件。
history.pushState(state,title,url)
state:對象，可以存放一些數(shù)據(jù)表示當前的狀態(tài)。當瀏覽器執(zhí)行前進或在后退的時候，會觸發(fā)onpopState事件，state將會是event對象的屬性對象，可以通過event.state訪問；需要注意的是，statez中的屬性值不能為對象。url為將要替換的地址；如果是puhState則會添加一條歷史記錄；
我們同樣可以用上面的例子來測試，只不過，我們需要監(jiān)聽的是popstate事件,新建歷史記錄，將當前信息保存到history.state中，
history.pushState && window.addEventListener("popstate",function(e){})
history.pushState && history.pushState（state,title,url）
總結
以上介紹的兩種方法，都可以實現(xiàn)頁面不跳轉的前提下，修改url 并新增一條新的歷史記錄，可以通過瀏覽器的默認行文執(zhí)行前進后退操作，但需要注意的是，兩者監(jiān)聽的觸發(fā)修改后的響應事件不同，且修改url的方式也不一樣。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/98768.html
摘要：執(zhí)行過程如下實現(xiàn)瀏覽器的前進后退第二個方法就是用兩個棧實現(xiàn)瀏覽器的前進后退功能。我們使用兩個棧，和，我們把首次瀏覽的頁面依次壓入棧，當點擊后退按鈕時，再依次從棧中出棧，并將出棧的數(shù)據(jù)依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實現(xiàn)一個前端路由，應該如何實現(xiàn)瀏覽器的前進與后退 ？ 2. 問題...
摘要：什么是第三方評論系統(tǒng)博客或系統(tǒng)，一般都是有內(nèi)容和評論兩部分組成。而且垃圾評論和過濾非法關鍵字難度較大，所以在國內(nèi)外都有第三評論系統(tǒng)。三評論系統(tǒng)實現(xiàn)預備工作創(chuàng)建。 本文只是介紹如何基于 github issues 實現(xiàn)第三方評論系統(tǒng)，對于 Hexo 介紹，本文并不打算詳述，如果有童鞋之前還沒有了解 Hexo 的，可以先看一下之前文章《靜態(tài)博客框架 Hexo 入門 》，或者直接訪問 Hex...
摘要：一款精簡而豐富的微型框架，非常適合以為核心的項目使用。并集成指令模板進度條效果等功能。雖然支持載入頁面的運行，但是由于安全限制以及可能出現(xiàn)的重復運行的問題，建議將所有寫在主頁面，事件以委托方式綁定。使用模式請求頁面，這樣可以保證是完全重載。 jQloader v0.2.3 一款精簡而豐富的微型框架，非常適合以 jQuery 為核心的項目使用。 它的核心功能為 ajax + pushS...
閱讀 3787·2021-11-23 09:51
閱讀 4430·2021-11-15 11:37
閱讀 3538·2021-09-02 15:21
閱讀 2759·2021-09-01 10:31
閱讀 890·2021-08-31 14:19
閱讀 868·2021-08-11 11:20
閱讀 3323·2021-07-30 15:30
閱讀 1700·2019-08-30 15:54
