JavaScriptで前のページに戻る
2024-09-08
JavaScriptでブラウザを前のページに戻す
HTMLでボタンを作成し、そのボタンがクリックされたときにJavaScriptのhistory.back()メソッドを使ってブラウザの履歴を一つ戻し、前のページに移動することができます。
HTMLコード
<button onclick="goBack()">前のページに戻る</button>
JavaScriptコード
function goBack() {
history.back();
}
動作の説明
- HTMLの
<button>タグでボタンを作成し、onclick属性にgoBack()関数を指定します。 - JavaScriptの
goBack()関数内でhistory.back()メソッドを呼び出します。 history.back()メソッドはブラウザの履歴を一つ戻し、前のページに移動します。
注意
- ブラウザの履歴を操作するためにはユーザーの同意が必要な場合もあります。
history.back()メソッドはブラウザの履歴が空の場合には動作しません。
他の方法
location.href = document.referrer;は、現在のページの参照元URLに移動します。window.history.go(-1)メソッドもhistory.back()と同じ効果があります。
<button onclick="goBack()">前のページに戻る</button>
function goBack() {
history.back();
}
window.history.go(-1)メソッド
- 履歴を複数ステップ戻りたい場合は、負の整数値を指定することができます。例えば、
window.history.go(-2)は2ページ前のページに移動します。 history.back()メソッドと同じ効果があります。
location.href = document.referrer;
- 参照元URLが設定されていない場合、動作しません。
- 現在のページの参照元URLに移動します。
- 履歴の操作
JavaScriptのhistoryオブジェクトを使用して、履歴を直接操作することもできますが、複雑な操作が必要な場合は注意が必要です。 - ブラウザの戻るボタン
ブラウザの標準的な戻るボタンを使用することもできます。
javascript html browser
