Pushstate と Popstate が URL を操作するためのメソッド

今回は、pushstateとpopstateでURLを操作する方法と、pushstateとpopstateでURLを操作するときの注意事項についてお届けします。実際のケースを見てみましょう。

1. window.history

を理解する window.history は、window オブジェクト の履歴を表します。これは、ユーザーによってアクティブに生成され、javascript スクリプトによって制御されるグローバル オブジェクトです。 window オブジェクトは、history オブジェクト を介してブラウザ履歴へのアクセスを提供します。これは、履歴内を自由に前後に移動できるようにするいくつかの非常に便利なメソッドとプロパティを公開します。

1. 履歴の前後方向

履歴に戻るには、次のようにすることができます:

window.history.back();

これは、ユーザーがブラウザの [戻る] ボタンをクリックするのと同じです。

同様に、次のように、ブラウザで進むボタンをクリックするのと同じように、前に進むことができます:

 window.history.forward();

2. 指定した履歴ポイントに移動します

現在のページ位置を基準とした相対値を指定することで、次のことができます。 go() メソッドを使用して、現在のセッションの履歴からページを読み込みます (現在のページ位置 index の値は 0、前のページは -1、次のページは 1)。

1ページ戻る(back()の呼び出しと同等):

 window.history.go(-1);

1ページ進む(forward()の呼び出しと同等):

window.history.go(1);

同様に、パラメータ「2」を渡すと、2ページ進むことができます。録音ポイント。 length 属性値をチェックして、履歴スタックにレコード ポイントがいくつあるかを確認できます。

window.history.length;

2. 履歴レコード ポイントを変更します

HTML5 の新しい API は window.history を拡張して、履歴レコード ポイントをさらに増やします開ける 。現在の履歴レコード ポイントを保存したり、現在の履歴レコード ポイントを置き換えたり、履歴レコード ポイントを監視したりすることができます。それぞれについて簡単に説明します。

1. 現在の履歴ポイントを保存します

保存方法は、配列のプッシュ (Array.push()) に似ています。たとえば、次のようになります。

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

は、pushState を実行します。この方法を実行すると、ページの URL アドレスは http://qianduanblog.com/post-1.html になります。

2. 現在の履歴ポイントを置き換えます

window.history.replaceState は window.history.pushState に似ています。違いは、replaceState が wi​​ndow.history に新しい履歴ポイントを追加しないことと、その効果が似ていることです。 window.location.replace(url) は、履歴レコード ポイントに新しいレコード ポイントを追加しません。 replaceState() メソッドは、ユーザーのアクションに応じて現在の履歴エントリの状態オブジェクトまたは URL を更新する場合に特に適しています。

3. 履歴ポイントの監視

履歴ポイントの監視は、直感的には URL の変更を監視するものと考えることができますが、URL のハッシュ部分は無視され、HTML5 には新しい API が追加されています。 onhashchange と呼ばれる I この方法とブラウザ間互換のソリューションについてもブログで説明されています。 window.onpopstate を使用して URL の変更を監視し、履歴レコード ポイントに保存されているステータス オブジェクト (上記の json オブジェクト) を取得できます。

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

JavaScript スクリプトが window を実行することに注目してください。 History .pushState と window.history.replaceState は onpopstate イベントをトリガーしません。

もう 1 つ注意すべき点は、ページが最初に開かれたとき、Google Chrome と Firefox では奇妙なことに onpopstate イベントがトリガーされるのに対し、Firefox ではトリガーされないことです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

更新せずに現在の URL のコードを変更する方法

H5 の LocalStorage はどのように更新値をローカルに保存しますか

以上がPushstate と Popstate が URL を操作するためのメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。