javascript Historyオブジェクト詳細

7244 ワード

length
history.length属性は、履歴のURL数を保持しています.初期の場合、この値は1です.IE 10＋ブラウザは、初期時には2を返しますので、互換性の問題があります.この値は一般的ではありません.
ジャンプ方法
go()、back()とforward()
移動位置がアクセス履歴の境界を超えている場合、上記の3つの方法はエラーではなく、サイレントエラーです.
[注意]履歴を使用する場合、ページは通常ブラウザキャッシュから読み込まれます.サーバに新たなウェブページの送信を要求するのではありません.トリガしないonload
増補記録
HTML 5は、historyオブジェクトに2つの新しい方法を追加しました.history.pusshate()とhistory.replacceState()は、閲覧履歴に記録を追加し、修正します.state属性は記録オブジェクトを保存するために使用されますが、popstateイベントはhistoryオブジェクトの変化をモニターするために使用されます.
[注意]ie 9はサポートしていません.
【pusshState】
history.pusState()メソッドはブラウザ履歴に状態を追加しました.pusshState()メソッドは、3つのパラメータを備えています.一つのステータスオブジェクト、一つのタイトル(現在は無視されています.)と、一つのオプションのURLアドレスです.　　　　history.pushState(state, title, url);state object――ステータスオブジェクトは、pusState()メソッドによって作成された、歴史記録に関するjavascriptオブジェクトです.ユーザが新しい状態に配向すると、popstateイベントがトリガされる.イベントのstate属性には、歴史記録のstateオブジェクトが含まれています.このオブジェクトが必要でない場合、ここでnullを記入できます.
title-新しいページのタイトルですが、すべてのブラウザは現在この値を無視していますので、ここでnullを書くことができます.
URL——このパラメータは新しい履歴の住所を提供します.新しいURLは現在のURLと同じエリアにある必要があります.そうでないと、pusState()は異常が発生します.このパラメータはオプションです.特に表示されていない場合は、ドキュメントの現在のURLに設定されます.
現在のウェブサイトがexample.com/1であると仮定して、pusStateを使って閲覧記録(historyオブジェクト)に新しいレコードを追加します.

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

上记の新记录を追加すると、ブラウザのアドレスバーにexample.com/2.htmlが表示されますが、2.htmlにジャンプするわけではなく、2.htmlが存在するかどうかも確認できません.この時にgoogle.comを訪問したら、後退ボタンをクリックしたら、ページのurlは2.htmlを表示しますが、内容は元の1.もう一回バックボタンを押したら、urlは1.を表示します.内容は変わりません.
つまり、pusshStateメソッドはページリフレッシュをトリガしません.historyオブジェクトが変化するだけで、アドレスバーの表示アドレスが変化します.
pusshStateのurlパラメータが新しいアンカーポイント値を設定したら、hash changeイベントをトリガしません.新しいURLと古いのはhashだけです.
ドメインをまたぐアドレスを設定したらエラーが発生します.このような設計の目的は、悪意のあるコードがユーザーに別のサイトにあると思わせることを防止することです.
【replace State】
history.replace State方法のパラメータはpusState方法と同じで、異なるところはreplace State()方法が現在の履歴項目を修正します.新しいエントリを作成するのではなく、現在の履歴項目を修正します.
現在のウェブページをexample.com/exampleと仮定します.

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url   http://example.com/example.html?page=1
history.back()
// url   http://example.com/example.html
history.go(2)
// url   http://example.com/example.html?page=3

【state】
history.state属性は現在のページのstateオブジェクトに戻ります.

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

【popstate事件】
同じ文書の閲覧履歴(すなわち、historyオブジェクト)が変化するたびに、popstateイベントが発生します.
[注意]このイベントは、ユーザがブラウザのバックボタンと前進ボタンをクリックしたり、javascriptを使ってback()、forward()、go()を呼び出したりする場合にのみトリガされます.また、イベントは同じドキュメントに対してのみ行われ、ブラウズ履歴が切り替わると、異なるドキュメントが読み込まれます.イベントはトリガされません.
使用する場合は、popstateイベントのためにコールバック関数を指定することができます.このコールバック関数のパラメータは、イベントオブジェクトであり、そのstate属性は、現在のURLに提供されている状態オブジェクト(すなわち、この2つの方法の最初のパラメータ)を指しています.

window.onpopstate = function (event) {
 console.log('location: ' + document.location);
 console.log('state: ' + JSON.stringify(event.state));
};

上のコードの中のevent.stateは、pusStateとreplacceStateの方法によって、現在のURLに結び付けられているstateオブジェクトです.
このstateオブジェクトは、historyオブジェクトから直接読み込むこともできます.　　var currentState = history.state;キャッシュ
デフォルトでは、ブラウザは現在のセッション(session)キャッシュページで、ユーザが「前進」または「後退」ボタンをクリックすると、ブラウザはキャッシュからページをロードします.
ブラウザには「往復キャッシュ」(back-forward cacheまたはbfcache)という特性があり、ユーザーがブラウザの「後退」と「前進」ボタンを使う時にページの切り替え速度を速めることができます.このキャッシュにはページデータだけでなく、DOMとjavascriptの状態も保存されています.実際にはページ全体をメモリに保存しています.ページがbfcacheにある場合、再度ページを開くと、ロードイベントは発生しません.
[注意]IE 10-ブラウザはサポートされていません.
【pageshow】
Pageshowイベントは、ページローディング時にトリガされ、最初のローディングとキャッシュからのローディングの両方を含む.ページが読み込まれるたびに実行されるコードを指定すると、このイベントの待ち受け関数に置いてもいいです.
初めて読み込む時は、そのトリガ順がロードイベントの後になります.キャッシュからロードすると、ロードイベントはトリガされません.ウェブページはキャッシュ中の様子が通常、ロードイベントの傍受関数の実行後の様子ですので、繰り返し実行する必要はありません.同じように、キャッシュからページを読み込むと、ページ内で初期化されたJavaScriptスクリプト(例えば、DOMContentLoadedイベントの傍受関数)も実行されません.
[注意]このイベントの目標はdocumentですが、イベントハンドラをwindowに追加しなければなりません.
Pageshowイベントは、persisted属性があり、ブール値を返します.ページの最初の読み込み時またはキャッシュから読み込まれていない場合は、この属性はfalseです.ページがキャッシュから読み込まれるとき、この属性はtrueです.

(function(){
 var showCount = 0;
 window.onload = function(){
  console.log('loaded');
 }
 window.onpageshow = function(e){
  e = e || event;
  showCount ++;
  console.log(e.persisted,showCount + 'times');
 }
})();

[注意]上記の例は、変数showCountがグローバルスコープに入るのを防止するためにプライベートスコープを使用している.ブラウザの「リフレッシュ」ボタンをクリックすると、showCountの値が0にリセットされます.ページが完全に再読み込みされましたから.
【Pagehide】
Pageshowイベントに対応するのはpagehideイベントで、このイベントはブラウザがページをアンインストールする際にトリガされ、またunloadイベントの前にトリガされます.pageshow事件と同じように、pagehideはdocument上でトリガしますが、そのイベントハンドラはwindowオブジェクトに追加しなければなりません.
[注意]ワンロードイベントハンドラを指定したページは自動的にbfcacheから除外されます.イベントハンドラが空であっても.ワンロードはワンロードで実行される操作をキャンセルするのに最もよく使われていますが、ワンロードをスキップして再度表示すると、ページが正常ではない可能性が高いからです.
Pagehideイベントのイベント対象にはpersisted属性も含まれていますが、その用途はちょっと違っています.ページがbfcacheから読み込まれている場合、persistedの値はtrueです.ページがアンインストールされた後にbfcacheに保存されると、persistedの値もtrueに設定されます.したがって、最初にPageshowをトリガすると、persistedの値はfalseであり、最初にpagehideをトリガすると、persistedはtrueになります(bfcacheにページが保存されない限り).

window.onpagehide = function(e){
 e = e || event;
 console.log(e.persisted);
}

使用方法:
1、デフォルトの戻り操作をキャンセルする

function pushHistory(){
  var state = {
       title: "title",
       url: "#"     
    }
  window.history.pushState(state, "title", "#");   
}

pushHistory()

2、history.jsはhttml 4に対応しています.pusStateとreplacceSateをモニターすることもできます.
転載先:https://www.cnblogs.com/fqlGlog/p/9319111.html

C萼漢字ユニックコードは相互に変換されます.