javascriptでブラウザの「戻る」「進む」

javascriptでブラウザの「戻る」「進む」をつくる方法。
レガシーになった技術だと思ってたら、実務で使う機会が巡ってきたのでメモ。

たとえば”bt_back”と”bt_forward”というidの要素があるとして

<div>
	<button id="bt_back">戻る</button>
	<button id="bt_forward">進む</button>
</div>

押したらブラウザの戻る進むの動作を紐付ける場合は、こんなスクリプトを書きます。
あ、リソース節約のためjQuery使ってます。
jQuery 1.7 から導入のon/offの書式なので、1.6以前のjQueryとセットにする場合はonをbindに置き換えてください。

$(function(){
	$('#bt_back').on('click',function(){
		history.back();
	});
	$('#bt_forward').on('click',function(){
		history.forward();
	});
});

サンプルはこちら。

location.href とかの書式はいらないのね。

ちなみに、実務で使った場面は
htmlに手を加えず外部javascriptだけで戻るボタンを追加したい
…という要望をいただいたときでした。

関連記事

Pocket