JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで履歴リストの次のURLを読み込む方法

JavaScriptでブラウザの履歴リスト内の次のURLに移動するには、historyオブジェクトのメソッドを利用します。ここでは、ボタンをクリックして次のページへ進むサンプルコードを紹介します。

実装例

以下のコードでは、「Next URL」ボタンをクリックするとnextPage()関数が呼び出され、履歴リストの次のURLへの移動を試みます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function nextPage() {
            window.history.next()
         }
      </script>

      <input type = "button" value = "Next URL" onclick = "nextPage()">
   </body>
</html>

注意：モダンブラウザでの推奨される方法

なお、history.next()は標準化されなかったため、現在の主要ブラウザでは動作しない点に注意してください。代わりに、History APIで標準となっているhistory.forward()メソッドを使用するのが確実です。このメソッドは、ブラウザの「進む」ボタンと同じ動作を行います。

function nextPage() {
   window.history.forward();
}

また、前のページに戻る場合はhistory.back()、指定した数だけ履歴を移動したい場合はhistory.go(n)（例：history.go(1)で次のページ、history.go(-1)で前のページ）を利用することもできます。用途に応じてこれらのメソッドを使い分けると、より柔軟なナビゲーション制御が可能になります。

  1. JavaScriptでドキュメントのタイトルと完全なURLを取得する方法

    JavaScriptのHTML DOMは、HTMLデータへアクセスし操作するための基本的なメソッドを数多く提供しています。ドキュメントのタイトルやURLを取得したい場合も、それぞれ専用のプロパティが用意されています。タイトルにはdocument.title、URLにはdocument.URLを使うことで、簡単に値を取り出せます。ここでは、それぞれの使い方を順番に見ていきましょう。ドキュメントのタイトルを取得するドキュメントのタイトルを取得するには、JavaScriptのHTML DOMが提供するdocument.titleプロパティを使用します。このプロパティは、HTML内の<title

  2. JavaScriptでページを再読み込みせずにURLからハッシュ（#）を削除する方法

    history APIのreplaceStateメソッドを使えば、ページを更新せずにハッシュを削除できるURLから#以降のハッシュ部分を取り除きたい場合、History APIのreplaceState()メソッドを使用することで、ページの再読み込みなしに実現できます。replaceState()は、現在の履歴エントリを、引数として渡されたステートオブジェクト・タイトル・URLで置き換えるメソッドです。ユーザーの操作に応じて、現在の履歴エントリの状態やURLだけを更新したい場合に特に便利です。ハッシュを削除するには、次のように記述します。history.replaceState(null, n