BOM 履歴オブジェクト

黄舟
リリース: 2017-02-10 09:55:46
オリジナル
1423 人が閲覧しました

前の言葉

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

length

history.lengthプロパティは履歴内のURLの数を保存します。初期状態では、この値は 1 です。現在のウィンドウが 3 つの URL を訪問した場合、history.length プロパティは 3 に等しくなります

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

history.length // 初始时,该值为1history.length // 访问三个网址后,该值为3
ログイン後にコピー

Jumpメソッド

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

【go()】

go()メソッドを使用すると、閲覧履歴間を移動できます。ユーザーの履歴レコード内を任意にジャンプします。このメソッドは、前後にジャンプするページ数を表す整数値であるパラメーターを受け取ります。負の数値は後方へのジャンプ (戻るボタンと同様) を表し、正の数値は前方へのジャンプ (進むボタンと同様) を表します

history.go(-1history.go(1history.go(2
ログイン後にコピー

go() メソッドにパラメータがない場合、history.go( 0), 現在のページを更新できます

//刷新当前页面history.go();//刷新当前页面history.go(0);
ログイン後にコピー

【back()】

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

【forward( )】

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

//后退一页history.back()//前进一页history.forward()
ログイン後にコピー

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

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

レコードの追加と変更

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

[注意] IE9 ブラウザはサポートしていません

[pushState()]

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

history.pushState(state, title, url);
ログイン後にコピー

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象,此处可以填null
title —— 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null
URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL
ログイン後にコピー

の 3 つのパラメータを取ります。現在の URL が example.com/1 であると仮定すると、使用します。閲覧レコード(履歴オブジェクト)に新しいレコードを追加するためのpushStateメソッド

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
ログイン後にコピー

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

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

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

// 报错history.pushState(null, null, 'https://twitter.com/hello');
ログイン後にコピー

【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://www.php.cn/history.back()// url显示为http://www.php.cn/history.go(2)// url显示为http://www.php.cn/
ログイン後にコピー

【状態】

履歴。 stateプロパティは現在のページのstateオブジェクトを返します

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

history.state// { page: 1 }
ログイン後にコピー

【popstateイベント】

同じドキュメントの閲覧履歴(つまりhistoryオブジェクト)が変化するたびに、popstateイベントがトリガーされます

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

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
ログイン後にコピー

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

この状態オブジェクトは、履歴オブジェクトを通して直接読み取ることもできます

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);
}
ログイン後にコピー


以上就是BOM之history对象的内容,更多相关内容请关注PHP中文网(www.php.cn)!



関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート