[解決済み] window.history.pushStateでブラウザを更新する
質問
私はいくつかのjavascriptのコードで作業しています。
window.History.pushState
を読み込んで、新しい
HTML
ページを使用する代わりに
href
タグを使用します。私のコード(これは
正常に動作している
) は次のようになります。
window.History.pushState({urlPath:'/page1'},"",'/page1')
不思議なことに、この 失敗 ブラウザを再読み込みします。
window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')
しかし、この 動作 コンテンツは更新されるが、ブラウザは更新されない! (URLは相対的ではなく絶対的であることに注意してください)
window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')
は
ドキュメント
に対して
window.History.pushState
によると、3つ目のパラメータ URL は絶対パスか相対パスのどちらかであるとのことです。
URL - 新しい履歴エントリーのURLは、このパラメータで指定します。注意 を呼び出した後、ブラウザはこのURLを読み込もうとしないこと。 pushState() は、後で URL を読み込もうとするかもしれません。 ユーザがブラウザを再起動した後 新しいURLは 相対パスであれば,現在のURLからの相対パスで解決される。 新しいURLは、現在のURLと同じオリジンでなければなりません。 は例外を発生させる。 このパラメータはオプションです。 指定されない場合は、ドキュメントの現在の URL が設定されます。
絶対URLは動作するようですが、相対URLは動作しないようです。なぜこのようなことが起こるのでしょうか?
解決方法は?
簡単に言うと
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
が使用されている場合、この問題がどこから発生しているのか、私たちが喜んでお手伝いさせていただきます。
もっとコードを投稿してくれたら、この回答を更新します(あなたの質問をお気に入りに入れています) :).
関連
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] ブラウザによって異なるURLの最大長とは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】エラー:リスン EACCES 0.0.0.0:80 OSx Node.js
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】module.exports "モジュールが定義されていません"