JavaScriptでブラウザの履歴を移動する

JavaScriptからブラウザの戻るや進むの動作を行ってみます。

サンプルコード

1つ前に戻る場合はhistoryオブジェクトのback()、1つ先へ進む場合はforward()、指定した数だけ前後へ移動する場合はgo()を使用します。

HTML

<div class="control">
	<p>ブラウザ履歴の移動</p>
	<button id="prev2">2つ前へ</button>
	<button id="prev">1つ前へ</button>
	<button id="next">1つ先へ</button>
	<button id="next2">2つ先へ</button>
</div>

JavaScript

console.log('履歴の数:' + window.history.length);

// 1つ前に戻る
document.getElementById('prev').addEventListener('click', function() {
	window.history.back();
}, false);

// 1つ先へ進む
document.getElementById('next').addEventListener('click', function() {
	window.history.forward();
}, false);

// 2つ前に戻る
document.getElementById('prev2').addEventListener('click', function() {
	window.history.go(-2);
}, false);

// 2つ先へ進む
document.getElementById('next2').addEventListener('click', function() {
	window.history.go(2);
}, false);

ブラウザの履歴を移動するデモページ
　

【参考サイト】

• ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN