web-dev-qa-db-ja.com

window.history.pushStateはブラウザを更新します

私はいくつかのjavascriptコードに取り組んでおり、window.History.pushStateHTMLタグを使用する代わりに、新しいhrefページをロードします。私のコード（working fine）は次のようになります。

window.History.pushState({urlPath:'/page1'},"",'/page1')

奇妙なことに、これはfails、つまりブラウザをリロードします

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

しかし、これはworks、コンテンツは更新され、ブラウザは更新されません！ （URLは絶対であり、相対ではないことに注意してください）

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

ドキュメント for window.History.pushStateは、3番目のパラメーターURLが絶対または相対のいずれかであることを示しています-

URL —新しい履歴エントリのURLは、このパラメーターによって指定されます。ブラウザーは、pushState（）の呼び出し後にこのURLのロードを試行しませんが、ユーザーがブラウザーを再起動した後など、後でURLのロードを試行する場合があることに注意してください。新しいURLは絶対である必要はありません。相対である場合、現在のURLを基準にして解決されます。新しいURLは、現在のURLと同じOriginである必要があります。そうでない場合、pushState（）は例外をスローします。このパラメーターはオプションです。指定されていない場合は、ドキュメントの現在のURLに設定されます。

絶対URLは機能しているように見えますが、相対URLは機能していないようです。なぜこうなった？

javascriptphphtmlbrowserpushstate
32
Ankit Rustagi

簡単な答えは、_history.pushState_（例外をスローする_History.pushState_ではなく、window部分はオプションです）は、あなたが提案することを決してしないということです。

ページが更新されている場合は、他の操作によって発生しています（たとえば、アドレスバーが変更された場合に新しい場所に移動するコードが実行されている可能性があります）。

history.pushState({urlPath:'/page2.php'},"",'/page2.php')は、Chromeの最新バージョンで想定されているとおりに動作します。IEと、私と同僚のためのFirefox。

実際、あなたは好きなものを関数に入れることができます：history.pushState({}, '', 'So long and thanks for all the fish.not a real file')。

さらにコードを投稿する場合（_history.pushState_および_document.location_の近くのコードに特別な注意を払う場合）、この問題の正確な原因を突き止めることができます。 。

あなたがより多くのコードを投稿する場合、私はこの答えを更新します（私はあなたの質問が好きです）:)。

38
Maverick

他の人が示唆しているように、あなたはあなたの問題、あなたがやろうとしていること、またはこの機能が実際に何をするかについてのあなたの期待は明確に説明していません。

私が正しく理解していれば、この関数はページを更新することを期待しています（実際には「ブラウザをリロードする」という用語を使用します）。

ただし、この関数はブラウザをリロードすることを意図したものではありません。

すべての機能は、ブラウザの履歴に新しい「状態」を追加（プッシュ）することです。これにより、将来、ユーザーはWebページが現在の状態に戻ることができます。

通常、これはAJAX呼び出し（ページの一部のみを更新する）と組み合わせて使用​​されます。

たとえば、ユーザーが検索ボックスの1つで検索「CATS」を実行し、検索結果（おそらく猫のかわいい写真）がAJAXを介してページの右下に読み込まれた場合、ページの状態は変更されません。つまり、近い将来、ユーザーが「CATS」の検索に戻りたいと判断した場合、その状態は履歴に存在しないため、ユーザーはそれを実行できません。彼は空の検索ボックスに戻ることしかできません。

したがって、関数の必要性

history.pushState({},"Results for `Cats`",'url.html?s=cats');

これは、プログラマーがユーザーの履歴記録に検索を明確に定義できるようにするためのものです。それがすることを意図しているすべてです。

関数が正常に動作している場合、表示されるのはブラウザのアドレスバーのアドレスがURLで指定したものに変わることだけです。

すでにこれを理解している場合は、この長い前文でごめんなさい。しかし、質問を投げかける方法から聞こえますが、あなたはそうではありません。

余談ですが、ドキュメントでの関数の記述方法と実際の動作方法との間にいくつかの矛盾もあります。パラメーターとして空白または空の値を使用することはお勧めできません。

this SO question への回答を参照してください。したがって、2番目のパラメーターに説明を入力することをお勧めします。メモリから、これはユーザーがドロップで見る説明です。 -down、「戻る」ボタンの上でマウスをクリックしたままにします。

5
cartbeforehorse
window.history.pushState({urlPath:'/page1'},"",'/page1')

ページが読み込まれた後にのみ機能します。更新をクリックしても、実際のURLが存在するわけではありません。

ここですべきことは、このページをリロードするときにリダイレクトされるURLを知ることです。そして、そのページでは、現在のURLを取得してすべての条件を作成することにより、条件を取得できます。

2
TBI