cman.jpWEBページ作成
広告
ウインドウヒストリ「戻る」「進む」「追加」
JavaScriptでページの遷移元を確認する場合や遷移元に戻る場合は、「window.history」を使用します。
サンプルは全てライセンスフリーとしていますので、改変や再配布も自由です。（コメントを残していただけると幸いです）
ただし、動作の保証は一切行っておりませんのでご理解の上、ご利用ください。
広告
ウインドウヒストリ 構文
| 構文 | |
|---|---|
| 参照 | obj = window.history; |
| ヒストリ数の参照 | number = window.history.length; |
| 戻る | window.history.back(); |
| 進む | window.history.forward(); |
| 指定履歴へ移動 | window.history.go(n); n : 0-現ページ、負数-戻る、正数-進む |
| 履歴の追加 | window.history.pushState( state , title, url ) |
| 履歴の書き換え | window.history.replaceState( state , title, url ) |
| 履歴移動の検知 (ブラウザの[戻る][進む]ボタン検知) | popstate(status) [onpopstate] |
| 「window.history」＝「history」となり「window」は省略可能です。 | |
ウインドウヒストリ サンプル
1.ヒストリを参照する
2.ページ移動「戻る」「進む」「指定履歴に移動」
- 「戻る」「進む」の該当履歴が存在しない場合は無視されます。
- 履歴のURLなど情報は参照することができません。
3.「pushState」「replaceState」「popstate」
「pushState」はhistoryを追加、「replaceState」は現在のヒストリを書き換え出来ます。「popstate」を利用することでブラウザの「戻る」「進む」ボタンの押下を検知することができます。
historyを制御することで、今まで実現できなかった以下の画面遷移が可能となります。
サンプルにはありませんが「replaceState」は現在の履歴情報を書き換える機能となります。引数は「pushState」と同じ。
- urlに指定できるのは同じドメインのみとなります。違う場合はクロスドメインとなり正常動作しません。
- サンプルにはありませんが「replaceState」は現在の履歴情報を書き換える機能となります。引数は「pushState」と同じ。
- 「pushState」「replaceState」「popstate」はHTML5で追加された機能のため、古いブラウザなど一部で操作しない可能性があります。
広告