JavaScript アドバンス

JavaScript Window History

1. Window History オブジェクト

window.history オブジェクトには、ブラウザの閲覧履歴(ヒストリー)が含まれています。

この window.history オブジェクトは、window プレフィックスを省略して history だけで記述することも可能です。

ただし、ユーザーのプライバシーを保護するため、JavaScriptがこのオブジェクトにアクセスする方法には一定の制限が設けられています。

主なメソッドは以下の通りです:

  • history.back() - ブラウザの「戻る」ボタンをクリックするのと同じ動作
  • history.forward() - ブラウザの「進む」ボタンをクリックするのと同じ動作

2. Window History Back

history.back() メソッドは、履歴リスト内の前のURLをロードします。

これは、ブラウザのツールバーにある「戻る」ボタンをクリックするのと全く同じ動作をプログラムから実行するものです。

2.1 コード例

ページ上に独自の「戻る」ボタンを作成する実装例です。

<html>
<head>
<script>
function goBack() {
  // 履歴を1つ戻る
  window.history.back()
}
</script>
</head>
<body>

<input type="button" value="戻る" onclick="goBack()">

</body>
</html>

上記コードを実行すると、クリック可能なボタンが表示されます。

3. Window History Forward

history.forward() メソッドは、履歴リスト内の次のURLをロードします。

これは、ブラウザのツールバーにある「進む」ボタンをクリックするのと全く同じ動作を実行します。

3.1 コード例

ページ上に独自の「進む」ボタンを作成する実装例です。

<html>
<head>
<script>
function goForward() {
  // 履歴を1つ進む
  window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="進む" onclick="goForward()">

</body>
</html>