html5使用history物件history.pushState()和history.replaceState()方法新增和修改瀏覽歷史記錄
轉自:https://www.studyscript.com/Post/index/id/3018.html?page=3
概述
瀏覽器視窗有一個history物件,用來儲存瀏覽歷史。
如果當前視窗先後訪問了三個網址,那麼history物件就包括三項,history.length屬性等於3。
history.length // 3
history物件提供了一系列方法,允許在瀏覽歷史之間移動。
back():移動到上一個訪問頁面,等同於瀏覽器的後退鍵。
forward():移動到下一個訪問頁面,等同於瀏覽器的前進鍵。
go():接受一個整數作為引數,移動到該整數指定的頁面,比如go(1)相當於forward(),go(-1)相當於back()。
history.back();
history.forward();
history.go(-2);
如果移動的位置超出了訪問歷史的邊界,以上三個方法並不報錯,而是默默的失敗。
history.go(0)相當於重新整理當前頁面。
history.go(0);
常見的“返回上一頁”連結,程式碼如下。
document.getElementById('backLink').onclick = function () {
window.history.back();
}
注意,返回上一頁時,頁面通常是從瀏覽器快取之中載入,而不是重新要求伺服器傳送新的網頁。
history.pushState()
HTML5為history物件添加了兩個新方法,history.pushState()和history.replaceState(),用來在瀏覽歷史中新增和修改記錄。
if (!!(window.history && history.pushState)){
// 支援History API
} else {
// 不支援
}
上面程式碼可以用來檢查,當前瀏覽器是否支援History API。如果不支援的話,可以考慮使用Polyfill庫History.js。
history.pushState方法接受三個引數,依次為:
state:一個與指定網址相關的狀態物件,popstate事件觸發時,該物件會傳入回撥函式。如果不需要這個物件,此處可以填null。
title:新頁面的標題,但是所有瀏覽器目前都忽略這個值,因此這裡可以填null。
url:新的網址,必須與當前頁面處在同一個域。瀏覽器的位址列將顯示這個網址。
假定當前網址是example.com/1.html,我們使用pushState方法在瀏覽記錄(history物件)中新增一個新記錄。
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
新增上面這個新記錄後,瀏覽器位址列立刻顯示example.com/2.html,但並不會跳轉到2.html,甚至也不會檢查2.html是否存在,它只是成為瀏覽歷史中的最新記錄。假定這時你訪問了google.com,然後點選了倒退按鈕,頁面的url將顯示2.html,但是內容還是原來的1.html。你再點選一次倒退按鈕,url將顯示1.html,內容不變。
總之,pushState方法不會觸發頁面重新整理,只是導致history物件發生變化,位址列會有反應。
如果pushState的url引數,設定了一個新的錨點值(即hash),並不會觸發hashchange事件。如果設定了一個跨域網址,則會報錯。
// 報錯
history.pushState(null, null, 'https://twitter.com/hello');
上面程式碼中,pushState想要插入一個跨域的網址,導致報錯。這樣設計的目的是,防止惡意程式碼讓使用者以為他們是在另一個網站上。
history.replaceState()
history.replaceState方法的引數與pushState方法一模一樣,區別是它修改瀏覽歷史中當前紀錄。
假定當前網頁是example.com/example.html。
history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url顯示為http://example.com/example.html?page=1
history.back()
// url顯示為http://example.com/example.html
history.go(2)
// url顯示為http://example.com/example.html?page=3
history.state屬性
history.state屬性返回當前頁面的state物件。
history.pushState({page: 1}, 'title 1', '?page=1');
history.state
// { page: 1 }
popstate事件
每當同一個文件的瀏覽歷史(即history物件)出現變化時,就會觸發popstate事件。
需要注意的是,僅僅呼叫pushState方法或replaceState方法 ,並不會觸發該事件,只有使用者點選瀏覽器倒退按鈕和前進按鈕,或者使用JavaScript呼叫back、forward、go方法時才會觸發。另外,該事件只針對同一個文件,如果瀏覽歷史的切換,導致載入不同的文件,該事件也不會觸發。
使用的時候,可以為popstate事件指定回撥函式。這個回撥函式的引數是一個event事件物件,它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態物件(即這兩個方法的第一個引數)。
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};
// 或者
window.addEventListener('popstate', function(event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
});
上面程式碼中的event.state,就是通過pushState和replaceState方法,為當前URL繫結的state物件。
這個state物件也可以直接通過history物件讀取。
var currentState = history.state;
注意,頁面第一次載入的時候,在load事件發生後,Chrome和Safari瀏覽器(Webkit核心)會觸發popstate事件,而Firefox和IE瀏覽器不會。
URLSearchParams API
URLSearchParams API用於處理URL之中的查詢字串,即問號之後的部分。沒有部署這個API的瀏覽器,可以用url-search-params這個墊片庫。
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
URLSearchParams有以下方法,用來操作某個引數。
has():返回一個布林值,表示是否具有某個引數
get():返回指定引數的第一個值
getAll():返回一個數組,成員是指定引數的所有值
set():設定指定引數
delete():刪除指定引數
append():在查詢字串之中,追加一個鍵值對
toString():返回整個查詢字串
var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);
searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]
searchParams.get('foo') // null,注意Firefox返回空字串
searchParams.set('foo', 2);
searchParams.get('foo') // 2
searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"
searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]
searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"
URLSearchParams還有三個方法,用來遍歷所有引數。
keys():遍歷所有引數名
values():遍歷所有引數值
entries():遍歷所有引數的鍵值對
上面三個方法返回的都是Iterator物件。
var searchParams = new URLSearchParams('key1=value1&key2=value2');
for (var key of searchParams.keys()) {
console.log(key);
}
// key1
// key2
for (var value of searchParams.values()) {
console.log(value);
}
// value1
// value2
for (var pair of searchParams.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}
// key1, value1
// key2, value2
在Chrome瀏覽器之中,URLSearchParams例項本身就是Iterator物件,與entries方法返回值相同。所以,可以寫成下面的樣子。
for (var p of searchParams) {
console.log(p);
}
下面是一個替換當前URL的例子。
// URL: https://example.com?version=1.0
var params = new URLSearchParams(location.search.slice(1));
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
URLSearchParams例項可以當作POST資料傳送,所有資料都會URL編碼。
let params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
DOM的a元素節點的searchParams屬性,就是一個URLSearchParams例項。
var a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"
URLSearchParams還可以與URL介面結合使用。
var url = new URL(location);
var foo = url.searchParams.get('foo') || 'somedefault';