リフレッシュせずにURLを変更するHTML5メソッド

プリアンブル

今日はvueの検索機能を作っているのですが、検索結果ページから詳細ページにジャンプして、クリックバックでさっきの結果ページにも戻りたいのですが、その時に使うのは window.history.go(-1) というのは、もちろん検索ページをリフレッシュしてしまうので、当然ながらうまくいきません。

urlを変更する方法を2つ試してみました。

• window.location.href, 検索キー値をスプライスし、同時に検索をクリックし、ページを更新し、URLが変更され、機能が達成されますが、バグが来た...... 検索ページが結果ページに入る前に点滅し、ページをジャンプしないことを組み合わせて、点滅が発生しないので、ページを更新すると、vueインスタンスが再読み込みされます。
• window.location.hash,# のurlはページ内の位置で、このurlを読み込むと、自動的にアンカーポイントまでページがスクロールします。このメソッドは、サーバーにリクエストを送信せず、ページの再読み込みも行いません。読み出しと書き込みが可能です。読み込まれた場合は、ページの状態が変化したかどうかを判断するために使用できます。書き込まれた場合は、ページを再読み込みすることなく、訪問の履歴が作成されます。

新規API

BaiduはHTML5を次のように見なしました。 {コード {コード オブジェクトは、以下の2つの新しいAPIを導入しています。 {コード {コード と {コード {コード メソッドがあり、それぞれ履歴を追加したり変更したりすることができます。これらのメソッドは通常

window.history

が、ブラウザはページを更新せず、対象ページが存在するかどうかも確認しない。

replaceState メソッド

新しいレコードを追加する代わりに、現在のレコードを置き換えたい場合があります。違いは、replaceState() は新しいものを作成するのではなく、現在の履歴項目を変更することです。

replaceStateはpushStateと同じように動作し、最も一般的には次のように使用されます。

history.pushState()

特徴：replaceStateは履歴に追加されません。history.go(-1)を使用すると、history.go(-2)と同等の現在のページがスキップされます。

ポップステートイベント

ページがロードされるとき、空でない状態オブジェクトを持つことがあります。これは、ページが状態オブジェクトを設定した後（pushState または replaceState を使用）、ユーザーがブラウザを再起動したときに発生する可能性があります。ページが再読み込みされるとき、ページは onload イベントを受け取りますが、popstate イベントは受け取りません。しかし、history.state プロパティを読むと、popstate イベントが発生した後に、このステートオブジェクトを取得することができます。

history.replaceState()

を呼び出します。 window.onpopstate または history.replaceState はpopstateイベントを発生させません。popstate イベントは、戻るボタンや進むボタンをクリックする（または JavaScript で history.back(), history.forward(), history.go() メソッドを呼び出す）など、特定のブラウザ操作によってのみトリガーされるでしょう。

例 現在のページアドレスが http://example.com/index.html

Syntax:window.history.pushState(state, title, url);

pushStateメソッドとハッシュ値設定の違いについて

pushState()の呼び出しは、どちらも現在のページに新しい履歴を作成して有効にするという点で、window.location = "#foo "と設定するのとある意味で似ています。しかし、pushState()にはいくつかの利点があります。

新しいURLは、現在のURLと同じオリジンのものであれば、どのようなURLでもかまいません。また、window.locationを設定しても、ハッシュを変更するだけなら同じファイルを保持するだけです。必要であれば、URLを変更せずに履歴を作成することができます。また、window.location.hash = "#foo";と設定すると、現在のハッシュが#fooでない場合のみ、新しい履歴エントリーが作成されます。新しい履歴項目には、任意のデータを関連付けることができます。一方、ハッシュベースのアプローチでは、関連するすべてのデータを短い文字列にエンコードする必要があります。

なお、history.pushStateによってWebページのURLアドレスを変更し、関連するコードで対応するインタフェースを表示・非表示することで、単一ページでのマルチインタフェース運用を実現することが可能です。この方法は、URLアドレスに直接アクセスするよりも高速で効率的であり、UI体験も優れていますが、実際の状況に応じてページの複雑さや結合度が増すことになり、一般にダイアログのポップアップボックスで使用されます。

用途：サイト全体のAJAX、およびAJAXページをブラウザがクロールできるようにする。

どんなことに使えるの？よくあるシナリオとしては、AJAXとの連携が挙げられます。

あるページの左側にいくつかのナビゲーションリンクがあり、右側にコンテンツがあるとします。一方、右側のコンテンツだけを更新する必要がある場合、ページ全体を更新することは間違いなく無駄です。このとき、AJAXを使って右側のデータを引っ張ってくればいいのです。しかし、これだけではアドレスバーが変化せず、ユーザーは前進も後退もできず、現在のページを回収したり、現在のページを他の人に共有したりすることもできず、検索エンジンのクロールも困難です。そこで、HTML5のHistory APIを使うことで、この問題を解決することができる。

アイデア まず、クリックイベントを束縛する。ユーザーがリンクをクリックすると、デフォルトの動作（ページジャンプ）をpreventDefault関数で防ぎつつ、リンクのアドレスを読み込み（jQueryがあれば$(this).attr('href')と記述できる）、pushStateでブラウザ履歴にアドレスを詰め、このアドレスの本当の内容をAJAX技術で（jQueryがあれば$.getメソッドを使えば）、現在のページの内容と入れ替えつつ引っ張るのです。

ユーザーの前進と後退を処理するために、popstateイベントをリッスンします。ユーザーが進むボタンや戻るボタンをクリックすると、ブラウザのアドレスが自動的に対応するアドレスに変換され、popstateイベントが発生します。イベントハンドラ関数では、現在のアドレスに基づいて対応するコンテンツを取得し、AJAXを使用してこのアドレスの実際のコンテンツを引き出してレンダリングします、以上です。

最後に、すべての処理でページタイトルを変更することはありません。これは、document.titleに直接値を代入することで変更できます。

概要

上記は、HTML5の小さな導入は、メソッドのURLを変更するには、更新を達成するために、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを与えてください、私は速やかに皆に返信されます。今後ともスクリプトハウスをよろしくお願いいたします。
この記事がお役に立つと思われる方は、ご自由に転載してください！出典を明記してください！ありがとうございました。