HTML5 history歷史記錄的幾個關鍵詞

2021-09-02 13:30:31 字數 1391 閱讀 2813

mark一下,省的忘了而已

1. html4時代的history api

a) history.length:當前歷史列表中的歷史記錄數(我大概測了下,ie6+是從0開始的,其他的是從1開始的,若有誤請反饋哈,^_^);

b) history.go(n):前進或後退n條記錄,當n=0或空時會重新整理當前頁;

c) history.back():後退一步;

d) history.forward():前進一步;

2. html5新增的api

a) history.pushstate(data, title [, url]):往歷史記錄堆疊頂部新增一條記錄;data會在onpopstate事件觸發時作為引數傳遞過去;title為頁面標題,當前所有瀏覽器都會 忽略此引數;url為頁面位址,可選,預設為當前頁位址;

b) history.replacestate(data, title [, url]) :更改當前的歷史記錄,引數同上;

c) history.state:用於儲存以上方法的data資料,不同瀏覽器的讀寫許可權不一樣;

d) window.onpopstate:響應pushstate或replacestate的呼叫;

3. 瀏覽器的相容性&檢測

在html5支援不一的時代,新的api總會存在或這或那的相容性問題。因此我們有必要了解新介面在不同瀏覽器下的相容性。

瀏覽器相容性表:

feature

chrome

firefox (gecko)

internet explorer

opera

safari

replacestate, pushstate

54.0 (2.0)

1011.50

5.0history.state

184.0 (2.0)

1011.50

6.0

如何檢測瀏覽器是否支援history api?

function supports_history_api()

如何檢測history.state的相容性呢?我嘗試賦值history.state=1,但history.state在不同瀏覽器下的讀寫許可權不一樣,所以我們換種方式:

var originalhistorystate = history.state; // 儲存原有的歷史資訊

history.replacestate(1, null); // 替換當前歷史資訊

var statesupport = history.state == 1; // 是否儲存到剛設定的歷史資訊 history.replacestate(originalhistorystate, null); // 恢復原來的歷史資訊

html5 history 歷史管理

參考文章 w3c 張鑫旭 zawa demo demo 截圖 內容一 內容二 內容三 內容四 後記 這 history.pushstate 必須在服務端才能生肖,所以這頁面在服務端開啟。history.pushstate 三個引數 第乙個引數為儲存的資料,第二值是設定document.title的值...

HTML5 History 模式的坑

周五下班前更新了一下 結果一更,出現了乙個bug!現象1 有一兩個頁面的logo不見了.於是開啟console,檢視資源的請求情況,發現請求正常且成功。這時候又在除錯的過程中發現了第二個問題。現象2 重新整理一下,頁面無法渲染,並報錯各種資源的丟失,無法正常載入。但是在本地開發的時候,一切資源正常,...

history命令歷史記錄中加時間

linux系統下可通過history命令檢視使用者所有的歷史操作記錄,但預設情況下,history命令只能檢視使用者歷史操作記錄,並不能區分使用者以及操作時間,不便於審計分析。當然,一些不好的操作習慣也可能通過命令歷史洩露敏感資訊。通過設定export histtimeformat f t 讓歷史記...