PushStateとreplaceStateを使用する手順の詳細な説明

今回はpushStateとreplaceStateを使用する手順について詳しく説明します。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 は JavaScript オブジェクト であり、pushState() を通じて新しい履歴エントリを作成します。ユーザーが新しい状態に移動するたびに、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 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

我们也可以直接在history对象上获取state，如下：

var currentState = history.state;

需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

七、popstate 事件的例子

假如当前网页地址为 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}

八、pushState()的用途

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

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+WebWorkers多线程开发使用详解

CSS3二级导航菜单制作步骤详解

以上がPushStateとreplaceStateを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。