JavaScript履歴オブジェクトの詳しい説明

上で述べたように

history オブジェクトは、ウィンドウを開いた瞬間から始まるユーザーのインターネット アクセスの履歴を保存します。セキュリティ上の考慮事項により、開発者はユーザーのブラウザの URL を取得できませんが、ユーザーが訪問したページのリストがあれば、実際の URL を知らなくても前後に進むことができます。この記事では、BOM の履歴オブジェクトについて詳しく紹介します

length

history.length プロパティには、履歴内の URL の数が格納されます。初期状態では、この値は 1 です。現在のウィンドウが連続して 3 つの URL にアクセスした場合、history.length 属性は 3 に等しくなります

IE10+ ブラウザは最初に 2 を返すため、互換性の問題があるため、この値は一般的に使用されません

history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3

Jump メソッド

history オブジェクトは、go()、back()、forward() を含む閲覧履歴間を移動できる一連のメソッドを提供します

【go()】

ユーザーの履歴内を移動するには go() メソッドを使用します意のままにジャンプしてください。このメソッドは、前後にジャンプするページ数を表す整数値であるパラメーターを受け取ります。負の数値は後方へのジャンプ (戻るボタンと同様) を表し、正の数値は前方へのジャンプ (進むボタンと同様) を表します。 0)、現在のページを更新できます

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);

【back()】

back()メソッドはブラウザの戻るボタンを模倣するために使用され、history.go(-1)

【forward()】と同等です。

forward() このメソッドは、history.go(1)に相当するブラウザの進むボタンを模倣するために使用されます

//刷新当前页面
history.go();
//刷新当前页面
history.go(0);

移動した位置がアクセス履歴の境界を超えた場合、上記の3つのメソッドは報告しませんエラーですが、サイレントに失敗します

[注 ] 履歴レコードを使用する場合、通常、ページはサーバーに新しい Web ページの送信を再要求するのではなく、ブラウザーのキャッシュから読み込まれます

レコードの追加と変更

HTML5 では 2 つの新しい Web ページが追加されます履歴オブジェクトへのメソッド、history.pushState() およびhistory .replaceState()。これらは、閲覧履歴のレコードを追加および変更するために使用されます。 state 属性はレコード オブジェクトの保存に使用され、popstate イベントは履歴オブジェクトの変更を監視するために使用されます

[注意] IE9 ブラウザは

[pushState()]

history.pushState() メソッドをサポートしていませんブラウザ履歴に状態が追加されました。 PushState() メソッドは 3 つのパラメータを取ります: 状態オブジェクト、タイトル (現在は無視されています)、およびオプションの URL アドレス

history.pushState(state, title, url);

state オブジェクト - 状態オブジェクトは JavaScript オブジェクトに関連していますPushState() メソッドによって作成された履歴に。ユーザーが新しい状態に誘導されると、popstate イベントがトリガーされます。イベントの状態プロパティには、履歴の状態オブジェクトが含まれます。このオブジェクトが必要ない場合は、null

title - 新しいページのタイトルを入力できますが、現在すべてのブラウザはこの値を無視するため、ここに null を入力できます

URL - このパラメータは、新しい歴史の記録。新しい URL は現在の URL と同じドメイン内にある必要があります。そうでない場合、pushState() は例外をスローします。このパラメータはオプションであり、特にマークされていない場合は、ドキュメントの現在の URL に設定されます

現在の URL が example.com/1.html であると仮定し、pushState メソッドを使用して新しいレコードを追加します。閲覧記録 (履歴オブジェクト)

//后退一页
history.back()
//前进一页
history.forward()

上記の新しいレコードを追加すると、ブラウザのアドレス バーにはすぐに example.com/2.html が表示されますが、2.html にはジャンプせず、2 かどうかも確認しません。 html が存在する場合は、「閲覧履歴の最新のエントリを表示する」になるだけです。この時点で google.com にアクセスし、戻るボタンをクリックすると、ページの URL には 2.html が表示されますが、コンテンツは元の 1.html のままです。もう一度巻き戻しボタンをクリックすると、URL に同じ内容の 1.html が表示されます

つまり、pushState メソッドはページの更新をトリガーせず、履歴オブジェクトとアドレス バーの表示アドレスを変更するだけです。変更します

pushState の url パラメータの場合、クロスドメイン URL が設定されている場合、新しい URL と古い URL のハッシュが異なるだけであっても、新しいアンカー値 (つまりハッシュ) を設定しても、hashchange イベントはトリガーされません。 、エラーが報告されます。この設計の目的は、悪意のあるコードがユーザーに別の Web サイトにいると思わせることを防ぐことです。新しい履歴エントリを作成するのではなく、現在の履歴エントリを変更します

現在の Web ページが example.com/example.html

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

であると仮定します。

[state]

history.state プロパティは、現在のページの state オブジェクトを返します

// 报错
history.pushState(null, null, 'https://twitter.com/hello');

[popstate イベント]

同じドキュメントの閲覧履歴 (つまり、履歴オブジェクト) が変更されるたびに、popstate イベントは次のようになります。このイベントは、ユーザーがブラウザの「戻る」ボタンと「進む」ボタンをクリックしたとき、または back()、forward()、を呼び出したときにのみトリガーされることに注意してください。 JavaScript を使用した go() メソッド。また、このイベントは同じドキュメントのみを対象とし、閲覧履歴が切り替わり、異なるドキュメントが読み込まれた場合、イベントはトリガーされません。popstate イベントのコールバック関数を指定できます。このコールバック関数のパラメータはイベント オブジェクトであり、その state 属性は、現在の URL の PushState メソッドと replaceState メソッドによって提供される state オブジェクト (つまり、これら 2 つのメソッドの最初のパラメータ) を指します

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

上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象

这个state对象也可以直接通过history对象读取

var currentState = history.state;

往返缓存

默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面

浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件

[注意]IE10-浏览器不支持

【pageshow】

pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的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对象

[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

pagehide事件的event对象也包含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);
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多javascript history对象详解相关文章请关注PHP中文网！