HTMLはURLアドレスを変更するためにリフレッシュされません

クズども · 掲載地 2017/09/12 13:55:04

Gecko2(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)以降に導入されました

HTML5はhisttory.pushState()とhistory.replaceState()という2つのメソッドを導入し、履歴エンティティの追加や修正を可能にします。同時に、これらの手法はwindow.onpostateイベントでも動作します。

stateが変更された後にxmlhttpRequestオブジェクトのhttpヘッダーで使用できるhistory.pushState()メソッドを使ってリファラーを修正します。このリファラーは、XMLHttpRequestが作成された際のドキュメントのURLとなります。

pushStateは現在のページのレコードを履歴に追加するために使われ、replaceStateとpushStateはまったく同じ用途ですが、唯一の違いは履歴上の現在のページのレコードを修正するために使われる点です。

例
http://mozilla.org/foo.html ページがJSを実行すると仮定します

var stateObj = { foo: "bar" }; history.pushState(stateObj、「ページ2」、「bar.html」);
この方法により、URLアドレスバーが http://mozilla.org/bar.html 表示されます。しかし、ブラウザはbar.htmlページが存在しても読み込みません。

ここでもユーザーが http://google.com にアクセスし続け、クリックを戻したと仮定します。この時点で、URLアドレスバーは http://mozilla.org/bar.html、ページにpopstateイベント(chrome)が割り当てられ、stateObjのコピーが入ります。このページはfoo.htmlのように見えます。 +

ここで再度クリックすると、URLが回転し http://mozilla.org/foo.html,document 別のpopstateイベントとnull状態オブジェクトが生成されます。この返却アクションは文書の内容を変えません。 (しばらくしたら読み込みを試みるかもしれません...) クローム)

pushState メソッド
pushState() には state object、title(現在は無視、未処理)、URL(任意)の3つのパラメータがあります。詳細:

·       state object – state object は pushState() メソッドで作成された新しい履歴エンティティに関連する Javascrip{filter}t オブジェクトです。履歴に挿入したいエントリーの情報を保存するために使われます。状態オブジェクトは任意のJson文字列でいられます。 Firefoxはユーザーのハードドライブを使って状態オブジェクトにアクセスするため、このオブジェクトの最大ストレージ容量は640kです。もしこの値より大きい場合は、pushState() メソッドが例外を投げます。もし収納スペースが増えるなら、ローカルストレージを使いましょう。

·       タイトル—Firefoxは現在このパラメータを無視していますが、将来的に使われる可能性があります。今の最も安全な使い方は、将来の改造を防ぐために空の文字列を通すことです。または、州を示すために短いタイトルをパスすることもできます

·       URL - このパラメータは新しい履歴エンティティのURLを渡すために使われます。ただし、pushState()メソッドを呼び出した後はブラウザがこのURLを読み込みません。でもしばらくすると、このURLを読み込もうとするかもしれません。例えば、ユーザーがブラウザを再起動した後、新しいURLは絶対パスでない場合もあります。もしそれが相対パスであれば、既存のURLに対して相対的になります。新しいURLは既存のURLと同一ドメインでなければならず、そうでなければpushState()は例外を投げてしまいます。このパラメータは任意で、空の場合は現在のURLとして設定されます。

ある意味で、pushState() メソッドを呼び出すことは、window.locatio{filter}n = "#foo" を設定するのに似ており、どちらも現在のドキュメントに関連付けられた別の履歴エンティティを作成・有効化しますが、pushState() にはいくつかの追加的な利点があります。

新しいURLは、現在のURLと同じドメイン内の任意のURLで構いません。ただし、ハッシュだけが設定されている場合はwindow.locatio{filter}nが同じドキュメント内に残るのとは対照的です。

必要ないならURLはそのままにしても構いません。比較のために、windows.locatio{filter}n = "#foo"を設定します。現在のハッシュが #foo でなければ、新しい履歴エンティティのみが生成されます

任意のデータを新しい履歴エンティティに関連付けることができます。ハッシュベースのアプローチでは、関連するすべてのデータを短い文字列にエンコードする必要があります。

pushState() メソッドは、古いURLと新しいURLが単に異なるハッシュであっても、ハッシュチェンジ時間は発生しません。

replaceState() メソッド
history.replaceState() は pushState() によく似ていますが、replaceState() は新しい履歴エンティティを作成するのではなく、現在の履歴エンティティを変更するために使われます。この方法は、特定のユーザーの動作に応じて状態オブジェクトや現在の履歴エンティティを更新する必要がある場合に役立ち、状態オブジェクトや現在の履歴エンティティのURLを更新するために使えます。

ポップステートのイベント
履歴エンティティが変更されると、popstateイベントが発生します。もしヒストリーエンティティがpushStateおよびreplaceStateメソッドによって生成された場合、popstateイベントのstate属性にはヒストリーエンティティのstateオブジェクトのコピーが含まれます

詳細はwindow.onpopstateをご覧ください

現在の状況を読む
現状を読んでください

ページが読み込まれる際には、非空の状態オブジェクトを持つことがあります。これは、ページが状態オブジェクトを設定し(pushStateまたはreplaceStateを使用)、ユーザーがブラウザを再起動したときに起こります。ページが再ロードされると、オンロードイベントは受けますが、popstateイベントは発生しません。しかし、history.stateプロパティを読むと、popstateイベントが発生した後にこのstateオブジェクトが手に入ります

History.pushState() ドキュメント: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

ログインが見えます。

受信URLのパラメータは文字列型であり、現在のアドレスバーのURLを変更するために使われます。注意点として、このパラメータはクロスドメインと同じであってはならず、プロトコル、ドメイン名、ポートが同じでなければなりません。

Uncaught DOMException: 'History' で 'pushState' を実行しませんでした: URL 'http://www.test.com/' の履歴ステートオブジェクトは、オリジン ' の文書では作成できません https://www.itsvse.com'とURL'https://www.itsvse.com/'。
1<anonymous>:9で

正しいコード:

ログインが見えます。

蘇彩火 · 掲載地 2017/10/27 9:51:10

かなり詳細で、悪くないです

[HTML/HTML5] HTMLはURLアドレスを変更するためにリフレッシュされません

関連記事

閲覧したセクション