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

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

1. window.historyを理解する。

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

1. 履歴の前後方向

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

window.history.back();

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

window.history.forward();

2. 現在のページ位置を基準とした相対値を指定して、指定された履歴ポイント

indexの値は 0、前のページは -1、次のページは 1)。

window.history.go(-1);

window.history.go(1);

window.history.length;

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

APIextends 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 が window.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} }

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

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