3 行の JavaScript コードでできる！ブラウザを前のページに戻す方法

2024-05-21

JavaScript でブラウザを前のページに戻す方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <button onclick="goBack()">前のページに戻る</button>
  <script>
    function goBack() {
      history.back();
    }
  </script>
</body>
</html>

解説

HTML:
- <button> タグでボタンを作成します。
JavaScript:

補足

この方法は、単純なページ遷移に使用できます。より複雑な処理には、history オブジェクトの他のプロパティやメソッドを使用する必要があります。
一部のブラウザでは、JavaScript でブラウザの履歴を操作する機能が制限されている場合があります。

window.location.href を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <button onclick="goBack()">前のページに戻る</button>
  <script>
    function goBack() {
      window.location.href = document.referrer;
    }
  </script>
</body>
</html>

document.referrer プロパティを使用して、現在のページに遷移した前のページの URL を取得します。
window.location.href プロパティを使用して、取得した URL に遷移します。

<a> タグを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <a href="#" onclick="goBack()">前のページに戻る</a>
  <script>
    function goBack() {
      history.back();
      return false; // デフォルトのリンク動作を抑制
    }
  </script>
</body>
</html>

<a> タグを使用して、前のページへのリンクを作成します。
onclick イベントを使用して、history.back() メソッドを呼び出します。
return false; を使用して、デフォルトのリンク動作（新しいページで開く）を抑制します。

注意事項

これらの方法は、JavaScript が有効なブラウザでのみ機能します。

history.back() を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <button onclick="goBack()">前のページに戻る</button>
  <script>
    function goBack() {
      history.back();
    }
  </script>
</body>
</html>

このコードは、以下の手順を実行します。

window.location.href を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <button onclick="goBack()">前のページに戻る</button>
  <script>
    function goBack() {
      window.location.href = document.referrer;
    }
  </script>
</body>
</html>

JavaScript:

この方法は、history.back() メソッドが機能しない場合に役立ちます。

<a> タグを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <a href="#" onclick="goBack()">前のページに戻る</a>
  <script>
    function goBack() {
      history.back();
      return false; // デフォルトのリンク動作を抑制
    }
  </script>
</body>
</html>

HTML:

この方法は、ユーザーがボタンではなくリンクをクリックすることを好む場合に役立ちます。
リンクのスタイルを変更して、ボタンのように見えるようにすることができます。

ブラウザを前のページに戻すその他の方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
</head>
<body>
  <button onclick="goBack(-1)">前のページに戻る</button>
  <button onclick="goBack(-2)">2つ前のページに戻る</button>
  <script>
    function goBack(n) {
      history.go(n);
    }
  </script>
</body>
</html>

history.go() メソッドを使用して、ブラウザの履歴を指定したページ数分進んだり戻ったりすることができます。
引数 n に正の値を指定すると、履歴を n ページ進みます。
history.go(0) は、現在のページを再読み込みします。

この方法は、前のページだけでなく、履歴の他のページにも移動したい場合に役立ちます。
n の値が履歴の範囲外の場合は、何も起こりません。

<meta http-equiv="refresh"> タグを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>前のページに戻る</title>
  <meta http-equiv="refresh" content="0; URL=document.referrer">
</head>
<body>
  </body>
</html>