更新せずに現在の URL を変更する HTML5 の Pushstate および Popstate 操作履歴の詳細な紹介

この記事では主にHTML5のpushstateとpopstateの操作履歴と、更新せずに現在のURLを変更するための関連情報を紹介します

1. 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

(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 アドレスは qianduanblog.com/post-1.html になります。

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

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

3. 履歴ポイントの監視

履歴ポイントの監視は、直感的には URL の変更を監視するものと考えることができますが、URL の

ハッシュ 部分は無視されます。HTML5 には新しい API があります。 onhashchange については、私のブログでもこの方法とブラウザ間互換性のあるソリューションについて説明しています。 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 ではトリガーされないことです。

以上が更新せずに現在の URL を変更する HTML5 の Pushstate および Popstate 操作履歴の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。