History APIってなんなん
History APIは以前からありjavascriptから「戻る」「進む」などの操作を提供していました。
HTML5になって履歴情報を操作(追加/変更/移動監視)することが可能となりました。
履歴の移動
前のページへ(back)
前のページに移動するには、以下の様にします。
window.history.back();
次のページへ(forward)
次のページに移動するには、以下の様にします。
window.history.forward();
指定ページに移動(go)
指定ページへの移動は、以下の様にします。
以下の例では、1つ次のページへ進みます。(window.history.forwad()と同じ動きになります。)
動きは引数にセットする値により変わります。
+の場合、現在のページより先へ
-の場合、現在のページより前へ
window.history.go(1)
履歴情報の操作
履歴情報では以下の情報を扱います。
- state 任意のオブジェクト
- title 現在は使用されていない値
- url 履歴のURL
履歴情報の追加(pushState)
履歴を追加するには、以下の様にします。
追加したstateは、popStateイベントの第1引数のオブジェクトにstateプロパティとして格納されます。
window.history.pushState({name : 't-okushima'}, null, '/name')
履歴情報の置き換え(replaceState)
履歴を置き換えるには、以下の様にします。
window.history.replaceState({name : 'aaaa'}, null, '/name')
履歴情報の監視(popState)
ブラウザの「戻る」「進む」または、同様の操作が行われた際に呼び出されるイベントとなります。
以下の様にします。
window.addEventListener('popstate', function(event) {
// 任意の処理
var state = event.state;
alert(state.name):
});
現履歴情報の取得(state)
現在の履歴情報をpopState以外から扱いたい場合に利用できます。
以下の様にします。
window.history.state
サンプル
<!DOCTYPE html>
<html>
<head>
<title>History API Sample</title>
</head>
<body>
<label for='name'>Name</label>
<input type='text' id='name' value='' />
<input type='button' id='pushButton' value='pushState' />
<hr />
<input type='button' id='replaceButton' value='replaceState' />
<script>
document.getElementById('pushButton').addEventListener('click', function() {
var name = document.getElementById('name').value;
window.history.pushState({name : name}, null, './history-api.html');
});
document.getElementById('replaceButton').addEventListener('click', function() {
var name = document.getElementById('name').value;
window.history.replaceState({name : name}, null, './history-api.html');
});
window.addEventListener('popstate', function(e) {
var state = e.state;
if (state) {
document.getElementById('name').value = state.name;
alert(state.name);
} else {
document.getElementById('name').value = '';
}
});
</script>
</body>
</html>