資訊專欄INFORMATION COLUMN
摘要：與事件都是瀏覽器歷史記錄，兩者都是中的，相對而言比更為強大。事件本身只是監(jiān)測的變化，我認為目前其主要意義就是與搭配使用從而使得在下歷史記錄前進后退按鈕依然有效。地址新的歷史記錄條目的地址。
hashchange與popstate事件都是瀏覽器歷史記錄API，兩者都是HTML5中的API，相對而言popstate比hashchange更為強大。注意這兩種歷史記錄管理都受同源策略的限制，這里厘清下兩者的區(qū)別以及相關(guān)應(yīng)用：
hashchangehashchange事件是在瀏覽器URL中hash發(fā)生變化后觸發(fā)的事件(事件觸發(fā)后會在瀏覽器歷史記錄中添加一條記錄)，URL中＃后的內(nèi)容就是hash，它的變化所觸發(fā)的hashchange事件與ajax搭配最多。 按我的理解， 因為hash變化并不會向服務(wù)器發(fā)生請求，所以如果沒有hashchange事件，當(dāng)我們點擊瀏覽器前進和后退按鈕時，服務(wù)器無法作出反應(yīng)（因為服務(wù)器無法收到請求）， 有了這個事件，就可以使用js觸發(fā)ajax的新請求讓服務(wù)器作出響應(yīng)。hashchange事件本身只是監(jiān)測hash的變化，我認為目前其主要意義就是與ajax搭配使用從而使得在ajax下歷史記錄前進后退按鈕依然有效。可以使用以下簡單的代碼體會下：
hashchange Click me foo Click me bar
hashchange的文檔mark? hashchange
popstatepopstate事件一般與pushState()和replaceState()這兩個方法搭配使用， 當(dāng)用戶點擊瀏覽器的前進后退按鈕時， 支持該事件的瀏覽器就會觸發(fā)popState事件，顧名思義，該事件所pop的正是由pushState()方法所保存的狀態(tài)棧，這里簡單替下pushState()方法的語法,引用自MDN文檔（注意該文檔中特意指出了firefox對該方法實現(xiàn)的差異， 比如對title的忽略）?操縱瀏覽器的歷史記錄：
pushState(object,title,url)
狀態(tài)對象（state object） — 一個JavaScript對象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。
任何可序列化的對象都可以被當(dāng)做狀態(tài)對象。因為FireFox瀏覽器會把狀態(tài)對象保存到用戶的硬盤，這樣它們就能在用戶重啟瀏覽器之后被還原，我們強行限制狀態(tài)對象的大小為640k。如果你向pushState()方法傳遞了一個超過該限額的狀態(tài)對象，該方法會拋出異常。如果你需要存儲很大的數(shù)據(jù)，建議使用sessionStorage或localStorage。
標(biāo)題（title） — FireFox瀏覽器目前會忽略該參數(shù)，雖然以后可能會用上。考慮到未來可能會對該方法進行修改，傳一個空字符串會比較安全?；蛘撸阋部梢詡魅胍粋€簡短的標(biāo)題，標(biāo)明將要進入的狀態(tài)。
地址（URL） — 新的歷史記錄條目的地址。瀏覽器不會在調(diào)用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)；傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會拋出異常。該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。
每次觸發(fā)popstate事件后，事件對象中state屬性保存了之前通過pushState()方法壓入的狀態(tài)對象。在《javascript權(quán)威指南》中例22-3很生動地展示了該用法，這里將這個例子放在codepen中(點擊鏈接打開，每次猜測數(shù)字后使用瀏覽器前進后退按鈕觀察狀態(tài)恢復(fù))，一些注釋我重新寫了一下便于理解，可直接在codepen中查看源碼：
DEMO ?基于popstate的猜數(shù)字游戲
這里順帶提下replaceState() ，這個方法與pushState()語法類似，但它是用第一個參數(shù)（狀態(tài)對象）主動替代當(dāng)前狀態(tài)，它并不會在瀏覽器歷史記錄中增加歷史記錄，這點類似于window.location.replace(url)
hashchange與popstate的區(qū)別歸納hashchange只有在hash值改變時才能觸發(fā)，而popstate在支持它的瀏覽器中只要按下“前進”“后退”按鈕就會在Window對象上觸發(fā)
popstate事件可以是任意同源的url下觸發(fā)，也就是說它可以在example.com/page1 與example.com/page2中都可以觸發(fā)，而hashchange只有在example.com/page1#hash中才可以（這點暫時是個人理解，并未實驗）
使用事件對象可以抽象數(shù)據(jù)，而不必將數(shù)據(jù)變成字符串加在hash中
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78856.html
摘要：最后通過這些自己實現(xiàn)小型的路由。對象還提供方法這個方法用以監(jiān)聽瀏覽器在不同歷史記錄中進行切換，而觸發(fā)相應(yīng)的事件。這時調(diào)用方法后頁面回退，同時頁面發(fā)生刷新這時無法監(jiān)聽這個事件。所以可以進行降級使用來進行路由設(shè)計。不過，還提供了一個。 這篇文章主要是記錄下HTML5中history提供的pushState, replaceStateAPI。最后通過這些API自己實現(xiàn)小型的路由。 關(guān)于win...
摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件不會被觸發(fā)使用的時候，可以為事件指定回調(diào)函數(shù)或者回調(diào)函數(shù)的參數(shù)是一個事件對象，它的屬性指向和方法為當(dāng)前所提供的狀態(tài)對象即這兩個方法的第一個參數(shù)。 一、history window.history(可直接寫成history)指向History對象，它表示當(dāng)前窗口的瀏覽歷史。History對象保存了當(dāng)前窗口訪問過的所...
摘要：目前前端三杰都推介單頁面應(yīng)用開發(fā)模式，在路由切換時替換中最小修改的部分，來減少原先因為多頁應(yīng)用的頁面跳轉(zhuǎn)帶來的巨量性能損耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介單頁面應(yīng)用 SPA 開發(fā)模式，在路由切換時替換 DOM Tree 中最小修改的部分 ...
摘要：原因在于將狀態(tài)對象保存在用戶的磁盤上，以便在用戶重啟瀏覽器時使用，我們規(guī)定了狀態(tài)對象在序列化表示后有的大小限制。新不必須為絕對路徑。新必須與當(dāng)前同源，否則會拋出一個異常。注意絕對不會觸發(fā)事件，即使新的與舊的僅哈希不同也是如此。 Hash hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）,在頁面中的hash有多種功能意義: 錨點 url: htt...
摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件不會被觸發(fā)使用的時候，可以為事件指定回調(diào)函數(shù)或者回調(diào)函數(shù)的參數(shù)是一個事件對象，它的屬性指向和方法為當(dāng)前所提供的狀態(tài)對象即這兩個方法的第一個參數(shù)。 history window.history(可直接寫成history)指向History對象，它表示當(dāng)前窗口的瀏覽歷史。History對象保存了當(dāng)前窗口訪問過的所有頁...
閱讀 2945·2021-11-22 09:34
閱讀 1244·2021-11-19 09:40
閱讀 3373·2021-10-14 09:43
閱讀 3602·2021-09-23 11:22
閱讀 1634·2021-08-31 09:39
閱讀 922·2019-08-30 15:55
閱讀 1458·2019-08-30 15:54
閱讀 889·2019-08-30 15:53
