JavaScript を使用してブラウザ URL アドレスの実装コードを変更する bar_javascript スキル

現在のブラウザには非常に興味深い機能があり、閲覧中にページを更新せずにブラウザの URL を変更でき、ブラウザのボタンをクリックすると閲覧履歴を保存できます。閲覧履歴を参照してロールバック情報を取得できます。これは複雑ではないので、いくつかのコードを書いてみましょう。どのように機能するかを見てみましょう。

コードをコピー コードは次のとおりです:

var stateObject = {};
var 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 = "すごいタイトル " i;
var newUrl = "/my/awesome/url/" i;
履歴。 PushState(stateObject ,title,newUrl);
}

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

コードをコピー コードは次のとおりです。

for(i=0;i<5) ;i ) {
var stateObject = {id: i};
var title = "すごいタイトル " i;
var newUrl = "/my/awesome/url/" i;
履歴。 PushState(stateObject ,title,newUrl);
alert(i);
}

window.addEventListener('popstate', function(event) {
readState(event.state);
});

function readState(data){
alert(data.id);
}

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

英語原文: http://hasin.me/2013/10/16/manipulated-url-using-javascript-without-freshing-the-page/