【解説】JavaScriptの「location」でURL情報を取得

【解説】JavaScriptの「location」でURL情報を取得

JavaScriptにて「location」オブジェクトを使えば、URL情報を取得したりができます。

今回は下記URLを例として紹介していきますね。

https://jito-site.com:8080/test/index.html?code=test#javascript

「location」オブジェクトにて使うプロパティやメソッドが主にこちら。

それぞれ下記のコードを使い、結果を順に解説していきますね。

const pageUrl = location.〇〇;
console.log(pageUrl);

location.href

https://jito-site.com:8080/test/index.html?code=test#javascript

URLのすべてを取得することができます。

location.origin

https://jito-site.com:8080

URLの「プロトコル＋ドメイン＋ポート番号」を取得できます。

location.hash

#javascript

URLのハッシュ部分を取得できます。

location.host

jito-site.com:8080

URLの「ホスト名」＋「ポート番号」を取得できます。

location.hostname

jito-site

URLの「ホスト名」を取得できます。

location.port

8080

URLの「ポート番号」を取得できます。

location.pathname

/test/index.html

URLのパス部分を取得できます。

location.protocol

https:

URLのプロトコル部分を取得できます。

location.search

?code=test

URLのクエリ部分を取得できます。

ちなみにこのクエリの値によって条件分岐させる方法もありますよ↓

2024年11月23日 【解説】JavaScriptでURLからパラメータを取得【値で条件分岐】

【解説】JavaScriptの「location」その他のメソッド

最後に「location」オブジェクトにて使える、その他のメソッドを紹介します。

順に見ていきましょう。

location.assign()

location.assign('https://jito-site.com/');

指定URLにページ遷移することができます。

履歴が残るため、遷移後に戻るボタンを押せば元のページに戻れるのが特徴です。

location.replace()

location.replace('https://jito-site.com/');

指定URLにページ遷移することができます。

ただ履歴に残らないため、遷移後に戻るボタンでは元のページに戻ることができません。

ジト

セキュリティやリダイレクト用途で使えそう。

location.reload()

// キャッシュを使うリロード
location.reload();

// 強制リロード
location.reload(true);

現在のページをリロードすることができます。

trueを渡すと強制リロードができ、falseまたは省略すればキャッシュを使うリロードが可能です。

【解説】JavaScriptの「location」でURL情報を取得：まとめ

ジト

「location」でURL情報を取得する時はためしてみてね！

ちなみに今見てるページの履歴前後を扱う方法もありますよ↓

2024年11月23日 【解説】JavaScriptの「history」の使い方【履歴の前後】

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙