[解決済み】JavaScriptで新しいページを読み込まずにブラウザのURLを変更する
2022-04-15 09:46:33
質問
どのように JavaScript アクションは、現在のページに何らかの影響を与えるかもしれませんが、ブラウザのURLも変更するので、ユーザーが再読み込みやブックマークを押すと、新しいURLが使用されるのでしょうか?
また、戻るボタンで元のURLを再読み込みしてくれると嬉しいですね。
URLにJavaScriptの状態を記録しようとしています。
どのように解決するのですか?
HTML5では
history.pushState
機能
. 例として
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
とhrefを指定します。
<a href="#" id='click'>Click to change url to bar.html</a>
戻るボタンのリストにエントリーを追加せずにURLを変更したい場合は、次のようにします。
history.replaceState
の代わりに
関連
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] リモート Git リポジトリの URI (URL) を変更するには?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] JavaScriptの「new」キーワードとは何ですか?
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】getElementByIdはnullを返す?[クローズド]
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される