JavaScriptでHistoryオブジェクトを使用する方法-安全性-php.cn

length

History.length プロパティには、履歴内の URL の数が保存されます。初期状態では、この値は 1 です。 IE10 ブラウザは最初に 2 を返すため、互換性の問題があるため、この値は一般的には使用されません

Jump メソッド

go()、back()、forward()

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

[注意] 履歴レコードを使用する場合、通常、ページはブラウザーのキャッシュから読み込まれます。サーバーに新しい Web ページを再度送信するように要求する代わりに。 onload をトリガーしません

レコードの追加と変更

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

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

##history.pushState(state, title, url);

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

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

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

の現在の URL に設定されます。現在の URL が example.com/1.html であると仮定すると、pushState メソッドを使用して追加します新しいレコード

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.html のままです。もう一度巻き戻しボタンをクリックすると、URL に 1.html が表示され、内容は変更されません。

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

PushState の url パラメータが新しいアンカー値 (つまりハッシュ) を設定した場合、新しい URL が古い URL と異なるだけであっても、hashchange イベントはトリガーされません。ハッシュ

設定されている場合クロスドメイン URL が指定されている場合、エラーが報告されます。この設計の目的は、悪意のあるコードによってユーザーが別の Web サイトにいると思わせないようにすることです。

[replaceState()]

history.replaceState メソッドのパラメーターは、 PushState メソッドと相違点 replaceState() メソッドは、新しいエントリを作成する代わりに、現在の履歴エントリを変更します。

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

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プロパティは、同じドキュメントの閲覧履歴(つまり、、履歴オブジェクト) が変更されると、popstate イベントがトリガーされます

[注意] PushState メソッドまたは replaceState メソッドを呼び出しただけでは、このイベントはトリガーされないことに注意してください。ユーザーがブラウザーの戻るボタンをクリックして、 [進む] ボタン、または JavaScript を使用して back()、forward()、go() メソッドのみがトリガーされます。また、このイベントは同じドキュメントのみを対象とします。閲覧履歴が切り替わり、異なるドキュメントが読み込まれた場合、イベントはトリガーされません。

使用する場合は、popstate イベントのコールバック関数を指定できます。このコールバック関数のパラメータはイベントイベントオブジェクトであり、その state 属性は、現在の URL の PushState メソッドと replaceState メソッドによって提供される state オブジェクト (つまり、これら 2 つのメソッドの最初のパラメータ) を指します。

上記のコードでは、event.state は、pushState メソッドと replaceState メソッドを通じて現在の URL にバインドされた状態オブジェクトです。

この状態オブジェクトは、履歴オブジェクト

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

ログイン後にコピー

ラウンドトリップキャッシュを通じて直接読み取ることもできます。

デフォルトでは、ブラウザは現在のセッションでページをキャッシュします。ユーザーが「進む」または「戻る」ボタンをクリックすると、ブラウザはキャッシュからページを読み込みます。ブラウザには「バックフォワードキャッシュ」(bfcache) と呼ばれる機能があり、ユーザーがブラウザの「戻る」ボタンと「進む」ボタンを使用したときにページ変換を高速化できます。このキャッシュはページデータを保存するだけでなく、DOM と JavaScript の状態も保存し、実際にはページ全体がメモリに保存されます。ページが bfcache にある場合、ページが再度開かれたときに読み込みイベントはトリガーされません

# [注意] IE10 - ブラウザーはサポートされていません

[pageshow]

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

　　第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

　　[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

　　pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

　　[注意]上面的例子使用了私有作用域，以防止变量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);
}

ログイン後にコピー

使用方法：

1、取消默认的返回操作

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

pushHistory()

ログイン後にコピー

2、history.js用于兼容html4，也可以监听pushState与replaceSate

以上がJavaScriptでHistoryオブジェクトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。