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

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

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

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

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

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

サンプルはこちら。

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

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

関連記事