HOWTO · JavaScript

JavaScript の history.forward()関数

この記事は、JavaScript を使用してブラウザーをナビゲートする方法を理解するのに役立ちます。

このページの内容

この記事では、JavaScript を使用してブラウザーをナビゲートする方法を説明します。

JavaScript で history.forward() 関数を使用する

ブラウザのウィンドウオブジェクトの一部として常にアクセスできる履歴オブジェクトには、JavaScript では forward() と呼ばれる関数があります。ブラウザの[進む]ボタンは、history.forward() 関数を使用する場合と同じです。

このメソッドは、HTML ページで次のように呼び出されます。

サンプルコード:

<body>
  <h1>Next Page</h1>
  <a href="b.html">To Next Page</a>

  <script>
    window.history.forward();
  </script>
</body>

ブラウザの履歴に次のページが含まれていない場合、history.forward() 関数は効果がありません。

history.forward() 関数は、より堅牢なセキュリティ対策が必要なオンラインアプリケーションの戻るボタンを無効にして、ブラウザの履歴の次のページに移動するためによく使用されます。これを行うには、ユーザーに戻らせたくないページに history.forward() 関数を含めます。

a.htmlb.html の 2つの Web ページがあり、a.html から b.html にアクセスできるシナリオを考えてみましょう。

サンプルコード:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>Next Page</h1>
    <a href="b.html">To Next Page</a>

    <script>
      window.history.forward();
    </script>
  </body>
</html>

ユーザーが b ページから a ページに戻らないようにする場合は、次のスクリプトを a ページに追加できます。

脚本:

<script>window.history.forward();</script>

まず、a.htmlb.html のような 2つの Web ページを作成し、両方のファイルを保存します。b.html などの別のページにリダイレクトするために、コードがメインページにあることを確認してください。

出力:

メインページで history.foward 関数を使用します

リンク(To Next Page)をクリックすると、次の html/ページにリダイレクトされます。

2 ページ目

b ページから a ページに戻ると、JavaScript を使用してブラウザの戻るボタンを非アクティブ化するメソッドがないため、history.forward() 関数が自動的に呼び出されます。

このアプローチは、ユーザーが現在のページを離れて戻るのを防ぐ必要がある特定のプログラムによって使用されています。