1. ホーム
  2. ジャバスクリプト

[解決済み】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 の代わりに