ホームページ > 記事 > ウェブフロントエンド > H5 の PushState と replaceState の使用分析

H5 の PushState と replaceState の使用分析

不言オリジナル: 2018-06-14 11:02:571635ブラウズ

この記事は主に、H5 での PushState と replaceState の使用法について簡単に説明するための関連情報を紹介します。内容は非常に優れているので、参考として共有します。

1. はじめに

HTML5 では、history.pushState() メソッドとhistory.replaceState() メソッドが導入されており、それぞれ履歴エントリを追加および変更できます。これらのメソッドは通常、window.onpopstate と組み合わせて使用されます。

2. PushState() メソッドの例

次の JavaScript コードが http://mozilla.org/foo.html で実行されると仮定します。

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

これにより、ブラウザのアドレスバーが http として表示されます。 : //mozilla.org/bar.html ただし、ブラウザは bar.html をロードせず、bar.html が存在するかどうかも確認しません。

ここで、ユーザーが http://google.com にアクセスして、「戻る」ボタンをクリックしたとします。このとき、アドレスバーには http://mozilla.org/bar.html が表示され、ページは Popstate イベントをトリガーします。イベントオブジェクトの state には stateObj のコピーが含まれます。ページ自体は foo.html と同じですが、その内容は Popstate イベントで変更される可能性があります。

もう一度戻るボタンをクリックすると、ページの URL が http://mozilla.org/foo.html に変わり、ドキュメントオブジェクト document が別の Popstate イベントをトリガーします。今回は、イベントオブジェクトの状態オブジェクトは null です。ここでも同様に、戻ってもドキュメントの内容は変わりません。popstate イベントを受信するとドキュメントの内容が変更される可能性がありますが、その内容は以前のプレゼンテーションと一貫性が保たれます。

3. PushState() メソッド

pushState() には、状態オブジェクト、タイトル (現在は無視されます)、および (オプション) の 3 つのパラメーターが必要です。この 3 つのパラメーターの詳細について説明します。

State オブジェクト - 状態オブジェクト state は、pushState() を通じて新しい履歴エントリを作成する JavaScript オブジェクトです。ユーザーが新しい状態に移動するたびに、popstate イベントが発生し、イベントの state プロパティには履歴エントリの state オブジェクトのコピーが含まれます。

Title — このパラメータは現在無視されていますが、将来的に使用される可能性があります。ここでは空の文字列を渡すのは安全ですが、将来的には安全ではありません。あるいは、ジャンプ状態の短いタイトルを渡すこともできます。

URL — このパラメータは、新しい履歴 URL レコードを定義します。ブラウザは、pushState() を呼び出した直後にこの URL をロードしないことに注意してください。ただし、ユーザーがブラウザを再度開いたときなど、後で特定の状況下でこの URL をロードする可能性があります。新しい URL は絶対パスである必要はありません。新しい URL が相対パスの場合、現在の URL に対する相対パスとして扱われます。新しい URL は現在の URL と同じオリジンを持つ必要があります。そうでない場合、pushState() は例外をスローします。このパラメータはオプションであり、デフォルトは現在の URL です。

4. PushState() メソッドとハッシュ値の設定の違い

ある意味、pushState() の呼び出しは window.location = "#foo" を設定するのと似ています。両方とも現在のページに作成されます。新しい履歴をアクティブ化します。ただし、pushState() には次の利点があります:

新しい URL は、現在の URL と同じオリジンを持つ任意の URL にすることができます。また、window.location を設定すると、ハッシュを変更しただけの場合にのみ同じファイルが保持されます。

必要に応じて、URLを変更せずに履歴レコードを作成できます。 window.location = "#foo"; と設定すると、現在のハッシュが #foo でない場合にのみ新しい履歴項目が作成されます。

あらゆるデータを新しい履歴項目に関連付けることができます。ハッシュ値ベースの方法では、すべての関連データを短い文字列にエンコードする必要があります。

5. replaceState() メソッド

history.replaceState() の使用法は、history.pushState() と非常によく似ていますが、replaceState() は新しい履歴項目を作成するのではなく、現在の履歴項目を変更するという点が異なります。。

6. Popstate イベント

アクティブな履歴エントリが変更されるたびに、対応するウィンドウオブジェクトで Popstate イベントがトリガーされます。現在アクティブな履歴エントリが、history.pushState() メソッドによって作成されたか、history.replaceState() メソッドによって変更された場合、popstate イベントオブジェクトの state プロパティには、履歴エントリの state オブジェクトのコピーが含まれます。

次のように、履歴オブジェクトの状態を直接取得することもできます:

var currentState = history.state;

history.pushState() またはhistory.replaceState() を呼び出しても、popstate イベントはトリガーされないことに注意してください。 opstate イベントは、「戻る」ボタンと「進む」ボタンをクリックする (または JavaScript でのhistory.back()、history.forward()、およびhistory.go() メソッドの呼び出しなど) など、ブラウザーの特定のアクションでのみトリガーされます。

7. Popstate イベントの例

現在の Web ページのアドレスが http://example.com/example.html の場合、次のコードを実行した後:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

8. の目的PushState()

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onpopstate可以监听到返回键事件</p>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件，并做你想做的事情，
            //例如：跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onhashchange可以监听到返回键事件</p>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

H5 の PushState と replaceState の使用分析

関連記事