歷史記錄API中hashchange與popstate的比較

Yangder 發布于2019-08-19 17:48 / 2693人閱讀

摘要：與事件都是瀏覽器歷史記錄，兩者都是中的，相對而言比更為強大。事件本身只是監測的變化，我認為目前其主要意義就是與搭配使用從而使得在下歷史記錄前進后退按鈕依然有效。地址新的歷史記錄條目的地址。

hashchange與popstate事件都是瀏覽器歷史記錄API，兩者都是HTML5中的API，相對而言popstate比hashchange更為強大。注意這兩種歷史記錄管理都受同源策略的限制，這里厘清下兩者的區別以及相關應用：

hashchange

hashchange事件是在瀏覽器URL中hash發生變化后觸發的事件(事件觸發后會在瀏覽器歷史記錄中添加一條記錄)，URL中＃后的內容就是hash，它的變化所觸發的hashchange事件與ajax搭配最多。按我的理解，因為hash變化并不會向服務器發生請求，所以如果沒有hashchange事件，當我們點擊瀏覽器前進和后退按鈕時，服務器無法作出反應（因為服務器無法收到請求），有了這個事件，就可以使用js觸發ajax的新請求讓服務器作出響應。hashchange事件本身只是監測hash的變化，我認為目前其主要意義就是與ajax搭配使用從而使得在ajax下歷史記錄前進后退按鈕依然有效。可以使用以下簡單的代碼體會下：





hashchange


    Click me foo
        Click me bar

hashchange的文檔mark? hashchange

popstate

popstate事件一般與pushState()和replaceState()這兩個方法搭配使用，當用戶點擊瀏覽器的前進后退按鈕時，支持該事件的瀏覽器就會觸發popState事件，顧名思義，該事件所pop的正是由pushState()方法所保存的狀態棧，這里簡單替下pushState()方法的語法,引用自MDN文檔（注意該文檔中特意指出了firefox對該方法實現的差異，比如對title的忽略）?操縱瀏覽器的歷史記錄：

pushState(object,title,url)

狀態對象（state object） — 一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，并且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝。
任何可序列化的對象都可以被當做狀態對象。因為FireFox瀏覽器會把狀態對象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強行限制狀態對象的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態對象，該方法會拋出異常。如果你需要存儲很大的數據，建議使用sessionStorage或localStorage。

標題（title） — FireFox瀏覽器目前會忽略該參數，雖然以后可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字符串會比較安全。或者，你也可以傳入一個簡短的標題，標明將要進入的狀態。

地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會在調用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當前URL為基準；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。該參數是可選的；不指定的話則為文檔當前URL。

每次觸發popstate事件后，事件對象中state屬性保存了之前通過pushState()方法壓入的狀態對象。在《javascript權威指南》中例22-3很生動地展示了該用法，這里將這個例子放在codepen中(點擊鏈接打開，每次猜測數字后使用瀏覽器前進后退按鈕觀察狀態恢復)，一些注釋我重新寫了一下便于理解，可直接在codepen中查看源碼：
DEMO ?基于popstate的猜數字游戲

這里順帶提下replaceState() ，這個方法與pushState()語法類似，但它是用第一個參數（狀態對象）主動替代當前狀態，它并不會在瀏覽器歷史記錄中增加歷史記錄，這點類似于window.location.replace(url)

hashchange與popstate的區別歸納

hashchange只有在hash值改變時才能觸發，而popstate在支持它的瀏覽器中只要按下“前進”“后退”按鈕就會在Window對象上觸發

popstate事件可以是任意同源的url下觸發，也就是說它可以在example.com/page1 與example.com/page2中都可以觸發，而hashchange只有在example.com/page1#hash中才可以（這點暫時是個人理解，并未實驗）

使用事件對象可以抽象數據，而不必將數據變成字符串加在hash中

云服務器 GPU云服務器 java比較歷史記錄記錄歷史歷史記錄天氣歷史記錄

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

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

利用pushState, popState和location.hash等方法自己實現一個小型路由

摘要：最后通過這些自己實現小型的路由。對象還提供方法這個方法用以監聽瀏覽器在不同歷史記錄中進行切換，而觸發相應的事件。這時調用方法后頁面回退，同時頁面發生刷新這時無法監聽這個事件。所以可以進行降級使用來進行路由設計。不過，還提供了一個。這篇文章主要是記錄下HTML5中history提供的pushState, replaceStateAPI。最后通過這些API自己實現小型的路由。關于win...

ysl_unh 2019-08-20 11:38 評論0 收藏0
history和hash詳解

摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發使用的時候，可以為事件指定回調函數或者回調函數的參數是一個事件對象，它的屬性指向和方法為當前所提供的狀態對象即這兩個方法的第一個參數。一、history window.history(可直接寫成history)指向History對象，它表示當前窗口的瀏覽歷史。History對象保存了當前窗口訪問過的所...

marser 2019-08-23 17:59 評論0 收藏0
前端路由跳轉基本原理

摘要：目前前端三杰都推介單頁面應用開發模式，在路由切換時替換中最小修改的部分，來減少原先因為多頁應用的頁面跳轉帶來的巨量性能損耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介單頁面應用 SPA 開發模式，在路由切換時替換 DOM Tree 中最小修改的部分 ...

SillyMonkey 2019-08-23 15:05 評論0 收藏0
從了解Hash和Html5 History 到簡單實現路由

摘要：原因在于將狀態對象保存在用戶的磁盤上，以便在用戶重啟瀏覽器時使用，我們規定了狀態對象在序列化表示后有的大小限制。新不必須為絕對路徑。新必須與當前同源，否則會拋出一個異常。注意絕對不會觸發事件，即使新的與舊的僅哈希不同也是如此。 Hash hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）,在頁面中的hash有多種功能意義: 錨點 url: htt...

Prasanta 2019-08-26 10:36 評論0 收藏0
history和hash，vue-router

摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發使用的時候，可以為事件指定回調函數或者回調函數的參數是一個事件對象，它的屬性指向和方法為當前所提供的狀態對象即這兩個方法的第一個參數。 history window.history(可直接寫成history)指向History對象，它表示當前窗口的瀏覽歷史。History對象保存了當前窗口訪問過的所有頁...

godiscoder 2019-08-23 18:07 評論0 收藏0