HTML5のプッシュステートとポップステートの操作履歴を詳しく説明し、更新せずに現在のURLを変更するコード例

この記事では主にHTML5の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 extends 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 アドレスは http://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

event

をトリガーしません。

もう 1 つ注意すべき点は、ページが最初に開かれたとき、Google Chrome と

Firefox では奇妙なことに onpopstate イベントがトリガーされるのに対し、Firefox ではトリガーされないことです。

以上がHTML5のプッシュステートとポップステートの操作履歴を詳しく説明し、更新せずに現在のURLを変更するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。