jsでのwindow.historyの使い方(1)

零下一度

リリース： 2017-05-18 10:51:12

オリジナル

3894 人が閲覧しました

Window.history は、セッション中にユーザーのWebサイトへのアクセス記録を保存します。ユーザーが新しいURLにアクセスするたびに、新しい履歴レコードが作成されます。

history.go()、history.back()、history.forward()

history.back()とhistory.forward()は、それぞれ1ページ前と1ページ前を表します。

history.go(num) は、前方または後方にめくるページ数を示します。num の正の数は前方に戻ることを意味し、負の数は後方に戻ることを意味します。

History.back() はhistory.go(-1) と同等、history.forward() はhistory.go(1) と同等です。

これら 3 つのメソッドのいずれかを実行して、ブラウザの Popstate イベントをトリガーします。ハッシュ部分のみが変更される場合は、同時に hashchange イベントもトリガーされる可能性があります。

ウェブサイトのパスを変更し、新しい履歴レコードを作成します

history.pushState(statedata, title, url);

ログイン後にコピー

パラメータのURLは現在のURLと同じオリジンを持つ必要があります、そうでない場合はエラーが報告されます。変更できるのは、URL 内のパス、ポンド記号の後のフラグメント (つまり、ハッシュ)、または URL 内の疑問符 (?) の後の query セクションのみです。

pushState() が実行されるたびに、現在の URL は新しい URL に置き換えられます。つまり、アドレスバーの URL が変更され、window.location.href も変更され、同時に新しい履歴レコードが作成されます。時間。ただし、pushState() を実行しても hashchange イベントはトリガーされません。

パラメータ statedata には、ユーザーのハードディスクに保存されているシリアル化されたデータを指定できます。ただし、ステータスデータにはサイズ制限があります。たとえば、Firefox では 640 KB の文字しか許可されません。

pushState() を使用する利点: URL のハッシュ部分のみが変更され、window.location は同じ document を使用します。

互換性の問題

pushState は IE10 までサポートされていません。IE の以前のバージョンでは、window.location="#foo" を変更することによってのみ完了できますが、これにより hashchange イベントがトリガーされます。

Webサイトのパスを変更しますが、新しい履歴レコードは作成しません

タイトルからわかるように、replaceState()とpushState()の唯一の違いは、新しい履歴レコードを作成するのではなく、直接作成することです。現在の履歴レコードを変更します。

history.replaceState(stateData, title, url);

ログイン後にコピー

履歴レコードのステータス

履歴アクセスレコードのステータス情報にアクセスするには 2 つの方法があります。history.state は履歴アクセススタックの最上位にあるレコードのステータスを返します。 PopStateEvent イベントはトリガーされ、イベントのリスニング中にのみアクセスできます。

State のデフォルト値はブラウザによって異なる場合があります。たとえば、IE10 未満のデフォルト値は undefiend ですが、IE10 と IE11 のデフォルト値は null です。 HTML5デフォルト値としてnulを使用することをお勧めします。

Event

popstateイベント

history.back()、history.forward()、history.go()およびその他のメソッドを呼び出すと、pushState()またはreplaceState()を呼び出すだけでpopstateイベントがトリガーされます。ポップステートイベントをトリガーしません。

イベントの state 属性にアクセスして、pushState() または replaceState() によって最初に設定された状態データを取得します。

【関連推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード

2. h5のhistory.pushState()の使用例の詳細な紹介

3. js での window.history の使用法 (2)

4. h5 の履歴機能の詳細な理解 - PushState、replaceState

5.ウェブアプリケーション

以上がjsでのwindow.historyの使い方(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。