h5 history api實現無重新整理前進後退
阿新 • • 發佈:2018-12-31
history.pushState(data, title [, url]):往歷史記錄堆疊頂部新增一條記錄;data會在onpopstate事件觸發時作為引數傳遞過去;title為頁面標題,當前所有瀏覽器都會 忽略此引數;url為頁面地址,可選,預設為當前頁地址。
history.replaceState(data, title [, url]) :更改當前的歷史記錄,引數同上。
history.state:獲取歷史棧中最頂端的state資料(即history.pushState中的第一個引數),不同瀏覽器的讀寫許可權不一樣。
popstate事件:當用戶單擊瀏覽器的後退或者前進按鈕(或者呼叫history.go,history.back,history.forward方法也會觸發popstate事件。呼叫history.pushState()或者history.replaceState()不會觸發popstate事件,但改變url中的hash值會觸發popstate事件)時觸發該事件。在事件處理函式中讀取觸發事件的事件物件的state屬性值,該屬性值即為執行pushState方法時所使用的第一個引數值,該state與history.state是相同的,而不是歷史棧中被丟擲的state物件。
到目前為止,IE10,firefox4以上的版本,Chrome8以上的版本,Safari5,Opera11以上的版本瀏覽器支援HTML5中的History API。
判斷是否支援h5 history api:
if (‘pushState’ in history) { … };
一個小例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="12.html?color=green">green</a><br/>
<a href="12.html?color=yellow" >yellow</a><br/>
<a href="12.html?color=blue">blue</a>
<div style="height: 100px;"></div>
<script>
history.replaceState({
color: 'red'
}, '紅色',"?color=red");//設定初始記錄
setBackgroundColor("red");
window.onpopstate = function (event) {
setBackgroundColor(event.state.color);
};//url改變觸發onpopstate事件
var aArr = document.getElementsByTagName('a');
for(var i = 0, num = aArr.length; i < num; i++){
aArr[i].onclick = (function (i) {
return function (event) {
var query = this.href.split("?")[1];
var color = query.split("=")[1];
event.preventDefault();
if (history.state.color !== color) {
setBackgroundColor(color);
history.pushState({
color: color
}, color ,location.href.split("?")[0] + "?" + query);
}
}
})(i)
}
function setBackgroundColor(color) {
document.getElementsByTagName('div')[0].style.backgroundColor = color;
}
</script>
</body>
</html>