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

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

JavaScriptでブラウザの履歴リストにある前のURL（ひとつ前のページ）を読み込むには、history.back()メソッドを使用します。このメソッドは、ブラウザの「戻る」ボタンをクリックしたときと同じ動作を実現します。

history.back()メソッドとは

history.back()は、Windowオブジェクトが持つhistoryオブジェクトのメソッドの一つで、セッション履歴をひとつ前に戻します。履歴に前のページが存在しない場合は、何も行われません。

なお、逆に次のページへ進みたい場合はhistory.forward()を、指定した数だけ移動したい場合はhistory.go(-1)やhistory.go(1)のように引数に数値を渡して使用することもできます。

実装例

以下のコードでは、「前のURLへ戻る」ボタンをクリックすると、履歴リストの前のページが読み込まれます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function backPage() {
            window.history.back();
         }
      </script>
      <input type="button" value="前のURLへ戻る" onclick="backPage()">
   </body>
</html>

動作のポイント

  • ボタンのonclickイベントでbackPage()関数を呼び出しています。
  • 関数内でwindow.history.back()を実行することにより、ひとつ前のページへ遷移します。
  • このコードを試す場合は、まず別のページから該当ページへ移動しておく必要があります。履歴がない状態では何も起こりません。

このように、history.back()を使えば簡単に「戻る」機能をWebページに実装できます。ユーザーの操作性を向上させるナビゲーションボタンなどに活用してみてください。

  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