History對象

高璐發布于2019-08-26 11:36 / 632人閱讀

摘要：方法接收三個參數，依次為一個與指定網址相關的狀態對象，事件觸發時，該對象會傳入回調函數。當前頁面的對象，即方法中第一個參數的值。

基本概念

history接口允許操作瀏覽器的曾經在標簽頁或者框架里訪問的會話歷史記錄。

屬性

history.length

history.state

history.scrollRestoration

方法

history.back()

history.forward()

history.go()

history.pushState()

history.replaceState()

history更多屬性和方法，請參考MDN鏈接

history.pushState();

按指定的名稱和URL將數據push進會話歷史棧橋。
history.pushState()方法接收三個參數，依次為:

state: 一個與指定網址相關的狀態對象，poststate事件觸發時，該對象會傳入回調函數。如果不需要這個對象，此處可以填null.

title: 新頁面的標題，但是所有瀏覽器目前都會忽略這個值，因此這里可以填null.

url: 新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

注意事項

參數中url必須和當前頁面處在同一個域下，否則會報錯。
例如，我在當前index.html中使用該方法，url參數為"https://www.baidu.com".會出現下面的報錯信息。

調用了pushState以后，瀏覽器地址欄會跟隨者發生變化，但是頁面并不會刷新，只是在路由棧里面增加了一條記錄。
隨后點擊瀏覽器前進后退箭頭，地址欄會有變化，頁面不會刷新。但是如果在當前瀏覽器地址欄重新輸入一個地址，然后又返回就會刷新一次地址。舉例如下：

當前頁面是page1.html,調用pushState(null, null, "page2.html")方法以后,頁面地址變為page2.html.然而頁面顯示的內容依舊是page1.html的內容。此時刪掉瀏覽器地址欄參數，改為"https://www.baidu.com"并回車訪問，去到百度頁面的時候，然后再點擊瀏覽器返回箭頭，將顯示page2.html頁面內容。
當然，上面在地址欄重新輸入一個地址的操作，可以改為任何可以刷新當前頁面的操作。比如，window.location.href或者window.location.reload()等等

history.replaceState()

history.replaceState方法的參數和pushState()方法一模一樣，區別是它修改瀏覽歷史中當前記錄。

history.state

當前頁面的state對象，即pushState()方法中第一個參數的值。

popstate事件

每當同一個文檔的瀏覽歷史出現變化時，就會觸發popstate事件。
需要注意的是，僅僅調用pushState方法或replaceState方法，并不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕或前進按鈕，或者使用JavaScript調用back,forward,go方法時才會觸發。

使用的時候可以為popstate事件指定回調函數。

window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});

應用

我們知道，Ajax可以實現頁面無刷新操作。但是，也會造成另外的問題，即無法前進與后退。
當執行Ajax操作的時候，往瀏覽器history中塞入一個地址（使用pushState）;于是，返回的時候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣。

GPU云服務器云服務器 history對象 history history back history linux

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

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

history和hash詳解

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

marser 2019-08-23 17:59 評論0 收藏0
從路由原理出發，深入閱讀理解react-router 4.0的源碼

摘要：通過前端路由可以實現單頁應用本文首先從前端路由的原理出發，詳細介紹了前端路由原理的變遷。接著從的源碼出發，深入理解是如何實現前端路由的。執行上述的賦值后，頁面的發生改變。 ??react-router等前端路由的原理大致相同，可以實現無刷新的條件下切換顯示不同的頁面。路由的本質就是頁面的URL發生改變時，頁面的顯示結果可以根據URL的變化而變化，但是頁面不會刷新。通過前端路由可以實現...

Miyang 2019-08-23 12:01 評論0 收藏0
從history api看主流框架的路由機制

摘要：前端路由庫的作用是改變地址欄，支持瀏覽器前進后退，并同步路由對應的視圖，這里以及其依賴的庫說一下路由機制原文地址前提首先簡單介紹一下前端路由機制所依賴的事件及對應的事件對于支持新增方法的瀏覽器，可以通過設置來在瀏覽器棧中新增一條記錄設置時前端路由庫的作用是改變地址欄，支持瀏覽器前進、后退，并同步路由對應的視圖，這里以react-router及其依賴的history庫說一下路由機制原...

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

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

godiscoder 2019-08-23 18:07 評論0 收藏0
JS中最容易被輕視的對象----location和history

摘要：最近開始移動端頁面的時候，被和坑了一把，于是決定對這兩個對象進行一個全面的剖析。但出于隱私方面的原因，對象不再允許腳本訪問已經訪問過的實際。唯一保持使用的功能只有和方法。華為執行完之后，我們發現不能回退了，是不是就跟實現同樣的效果了。最近開始移動端頁面的時候，被window.location和window.history坑了一把，于是決定對這兩個對象進行一個全面的剖析。下面進行我們的...

xumenger 2019-08-20 16:29 評論0 收藏0