JS實現不重載頁面前提下創建一條歷史紀錄

bigdevil_s 發布于2019-08-23 12:35 / 3275人閱讀

摘要：背景最近在上班過程中，遇到了這么一個需求，在多頁面應用中，需要在幾個頁面上共用同一個數據來源，且切換頁面不刷新頁面數據，并能實現歷史記錄的后退功能因前期只考慮在一個頁面內實現多個頁面的效果，并未考慮到歷史記錄堆棧中的處理，導致頁面會一次性推

背景

最近在上班過程中，遇到了這么一個需求，在多頁面應用中，需要在幾個頁面上共用同一個數據來源，且切換頁面不刷新頁面數據，并能實現歷史記錄的后退功能；因前期只考慮在一個頁面內實現多個頁面的效果，并未考慮到歷史記錄堆棧中的處理，導致頁面會一次性推出入口，以下為總結的幾種解決方法。

hash

在URL中，#我們稱為位置標識符，代表網頁的一個位置，在我們剛開始接觸到a標簽的時候，我們很多人都有操作過錨點跳轉，主要就是通過在 href 中設置想要跳到的位置的id值，在這個過程中，頁面是沒有刷新的，但歷史記錄卻新增了一條；我們利用window.location.hash可以取得當前頁面的hash值，同時也可以也可以通過其寫入新的hash值，并通過監聽hashchange事件，來檢測hash值是否發生了改變。當我們再點開彈框式的遮罩頁面的時候，可以手動的去修改location.hash的值，這樣點擊window.history.back()，就可以實現歷史記錄回退；

例子

代碼如下：




    
    Title
    



    加載中....

在瀏覽器中打開該頁面，并在路由上加上#blue,如下：

可看到如下頁面，初始條件下，頁面的顯示加載中...，而后定時器觸發更新，顯示遞增的數字，此時我們可以在控制臺中打印出對應的history.length,其值為2：

接下來，我們通過點擊change-url 按鈕，去實現修改hash值，我們可以看到，對應的路徑發生了改變，#blue變為#g"ra，背景顏色也對應的更改，但此時遞增的數字沒有被刷新，說明我們的頁面并沒有經過刷新重載的過程。

重新在控制臺輸入window.history.length可以看到，其值已經變為3，點擊瀏覽器后退箭頭，頁面背景改為之前的藍色背景，到這里，我們就實現我們想要的功能；

history.pushState

除了上面講到的方法外，通過html5新增的history.pushState也可以實現同樣的效果；
history.pushState和history.replaceState同是html5新增的api，都可以實現改變狀態欄的url而不刷新頁面，但兩者的區別是，replaceState是替換當前地址為指定的url，而pushState則是創建一條新的歷史紀錄。執行history.back()和history.forward()后會觸發window.onpopstate事件。

API

history.pushState(state,title,url)
state:對象，可以存放一些數據表示當前的狀態。當瀏覽器執行前進或在后退的時候，會觸發onpopState事件，state將會是event對象的屬性對象，可以通過event.state訪問；需要注意的是，statez中的屬性值不能為對象。url為將要替換的地址；如果是puhState則會添加一條歷史記錄；

例子

我們同樣可以用上面的例子來測試，只不過，我們需要監聽的是popstate事件,新建歷史記錄，將當前信息保存到history.state中，

history.pushState && window.addEventListener("popstate",function(e){})
history.pushState && history.pushState（state,title,url）

總結

以上介紹的兩種方法，都可以實現頁面不跳轉的前提下，修改url 并新增一條新的歷史記錄，可以通過瀏覽器的默認行文執行前進后退操作，但需要注意的是，兩者監聽的觸發修改后的響應事件不同，且修改url的方式也不一樣。

GPU云服務器云服務器 php 清除歷史紀錄 js實現頁面表格 js 實現頁面滑動 js實現頁面跳轉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98768.html

實現一個前端路由，如何實現瀏覽器的前進與后退？

摘要：執行過程如下實現瀏覽器的前進后退第二個方法就是用兩個棧實現瀏覽器的前進后退功能。我們使用兩個棧，和，我們把首次瀏覽的頁面依次壓入棧，當點擊后退按鈕時，再依次從棧中出棧，并將出棧的數據依次放入棧。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你實現一個前端路由，應該如何實現瀏覽器的前進與后退？ 2. 問題...

劉東 2019-08-23 18:01 評論0 收藏0
基于 github issues 實現第三方評論系統

摘要：什么是第三方評論系統博客或系統，一般都是有內容和評論兩部分組成。而且垃圾評論和過濾非法關鍵字難度較大，所以在國內外都有第三評論系統。三評論系統實現預備工作創建。本文只是介紹如何基于 github issues 實現第三方評論系統，對于 Hexo 介紹，本文并不打算詳述，如果有童鞋之前還沒有了解 Hexo 的，可以先看一下之前文章《靜態博客框架 Hexo 入門》，或者直接訪問 Hex...

waltr 2019-08-21 16:24 評論0 收藏0
jQloader 開源，集成 ajax、history、loading、orderTemplate

摘要：一款精簡而豐富的微型框架，非常適合以為核心的項目使用。并集成指令模板進度條效果等功能。雖然支持載入頁面的運行，但是由于安全限制以及可能出現的重復運行的問題，建議將所有寫在主頁面，事件以委托方式綁定。使用模式請求頁面，這樣可以保證是完全重載。 jQloader v0.2.3 一款精簡而豐富的微型框架，非常適合以 jQuery 為核心的項目使用。它的核心功能為 ajax + pushS...

JohnLui 2019-08-19 18:44 評論0 收藏0