h 5 history api無更新前進後退を実現
5435 ワード
ブラウザを操作する履歴 history.pusState(data,title[,url]):歴史記録スタックの上部に記録を追加します.dataはonpopstateイベントトリガー時にパラメータとして渡されます.titleはページのタイトルです.現在のブラウザはこのパラメータを無視します.urlはページの住所で、オプションで、デフォルトは現在のページの住所です. history.replaccestate(data,title[,url]):現在の履歴を変更します.パラメータは同じです. history.state:履歴スタックの一番上のstateデータ(つまり、history.pusStateの最初のパラメータ)を取得すると、ブラウザによって読み書きの権限が異なります. popstateイベント:ユーザーがブラウザの後退または前進ボタン(またはhistory.goを呼び出し、history.backを呼び出し、history.forwardメソッドがpopstateイベントをトリガします.history.pusState()またはhistory.replace State()を呼び出してもpopstateイベントをトリガしません.イベント処理関数では、イベントをトリガするイベントオブジェクトのstate属性値を読み出し、この属性値は、pusshStateメソッドを実行する際に使用される最初のパラメータ値であり、このstateは、history.stateと同じであり、歴史スタックに投げ出されたstateオブジェクトではない.これまでは、IE 10、firefox 4以上のバージョン、Chrome 8以上のバージョン、Safari 5、Opera 11以上のバージョンブラウザがHTML 5の中のHistory APIをサポートしています. h 5 history api:if(‘pusState’in history){…};
小さな例:
小さな例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<a href="12.html?color=green">greena><br/>
<a href="12.html?color=yellow">yellowa><br/>
<a href="12.html?color=blue">bluea>
<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>