ブラウザでの URL 保存の JavaScript 実装_基礎知識

WBOY
リリース: 2016-05-16 15:51:17
オリジナル
1052 人が閲覧しました

現在のブラウザには非常に興味深い機能があり、閲覧中にページを更新せずにブラウザの 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('popstate', function(event) {
 readState(event.state);
});
 
function readState(data){
 alert(data.id);
}
ログイン後にコピー

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!