JavaScript を使用して URL アドレスを変更する方法の紹介

[はじめに] 現在のブラウザには、ページを更新せずにブラウザの URL を変更することができ、ブラウザ内で戻るボタンをクリックすると、閲覧履歴を保存できます。閲覧履歴を調べて巻き戻し情報を取得するのは難しいことではありません

最近のブラウザには、ページを更新せずにブラウザの URL を変更できる機能があります。ブラウザの「戻る」ボタンをクリックすると、閲覧履歴の「戻る」情報を取得できます。これは複雑ではありませんが、実際にコードを書いてみましょう。どのように機能するかを見てみましょう。

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History object PushState() 上の例からわかるように、このメソッドには 3 つのパラメータがあります。最初のパラメータは Json オブジェクトで、現在の URL に関する履歴情報を保存します。2 番目のパラメータ title はドキュメントのタイトルを渡すのと同じで、3 番目のパラメータは新しい URL を渡すために使用されます。ブラウザのアドレス バーは変化しますが、現在のページは更新されません。

個々の URL に任意のデータを保存する例を見てみましょう。

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}

次に、それを実行し、ブラウザの戻るボタンをクリックして、URL がどのように変化するかを確認してください。 URL の変更ごとに、履歴状態「id」と対応する値が保存されます。しかし、歴史的状態を取り戻し、それに基づいて何かをするにはどうすればよいでしょうか?イベント リスナーを「popstate」に追加する必要があります。これは、履歴オブジェクトの状態が変化するたびにトリガーされます。

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}
 
window.addEventListener(&#39;popstate&#39;, function(event) {
  readState(event.state);
});
 
function readState(data){
  alert(data.id);
}

これで、戻るボタンをクリックするたびに、「popstate」イベントが発生することがわかります。次に、イベント リスナーは履歴状態オブジェクトが関連付けられている URL を取得し、「id」の値の入力を求めます。

とてもシンプルで楽しいですね。

以上がJavaScript を使用して URL アドレスを変更する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。