JavaScriptでアドレスバーのURLを書き換える方法

2024/5/6 JavaScript

こんにちは、さるまりんです。

タイトルの様にブラウザのアドレスバーに表示されているURLを変更する方法についてです。

historyのpushState()によって実現することができます。

pushState()の説明はこちらです。

こんな感じで呼び出します。
3つ目の引数に書き換えたいURLを渡します。

window.history.pushState({}, '', url);

1つ目はstate、history(履歴)に一緒に状態を残せる様ですが、今回は詳しくはパス。
アクセスされた日時を一緒に取っておくとかできそうです。
またじっくり考えてみたいと思います。

2つ目はunused、使われていないのかな。

下のコードはURL、タイトル、本文の3つを書き換えています。

URLはoverwrittenUrlの"/overwritten.html"に書き換えます。
それに加えてページのタイトルは”上書きされたタイトル”に、<body>タグの中の<div>にはid="container"が設定されていて、その中のHTMLをoverwrittenHtmlに設定されているHTMLで置き換えています。

const overwrittenTitle = "上書きされたタイトル";
const overwrittenHtml = "overwritten"; 
const overwrittenUrl = "/overwritten.html";

document.getElementById("container").innerHTML = overwrittenHtml;
document.title = overwrittenTitle;
window.history.pushState({"html":overwrittenHtml,"pageTitle":overwrittenTitle},"", overwrittenUrl);

変更前のページの状態です。(このサイトのトップです)

これを上記のコードで変更すると↓になります。

ちゃんと変わっていますね。

こんな感じで呼び出すとクエリパラメタを書き換えることも可能です。

const url = new URL(location);
url.searchParams.set("page", "favorite");
history.pushState({}, "", url);

どれくらい使うことがあるかわからないですが、ページ表示速度をとるためにJavaScriptでサーバー上のAPIを叩いたりして情報を非同期で表示したりする際にURLも変えておきたいとなったらこんな方法でできます。

読んでくださってありがとうございます。

それではまた！