JavaScriptでURLやらパスやらを取得する方法

URL取得方法 技術

Web制作の時にページごと違う処理をさせたいこと、ありますよね?
そんな時にはURLやパスなどを取得して、そのページで処理をさせると思います。

今回はそれをご紹介いたします!

フローとしては

URL、パス取得
⬇︎
ページの判定
⬇︎
ページごとに処理を変える

といったものになります。

JavaScriptでページの判定をするときは基本的に「Location」オブジェクトを使用します。

実際のコード(取得したいもの一覧)

プロトコルを取得

location.protocol

ドメイン、ホストを取得

location.host
location.hostname

ポート番号を取得

location.port

ページのパスを取得

location.pathname

パラメーターを取得

location.search

ページ内リンクを取得

location.hash

これでURIを取得することができます。

このサイトでの一例

このサイトの記事一覧ページはこんな感じ。

URL取得方法

そこで location.protocol をします。

URL取得方法

「https:」が取得できました。

「SSL対応しているとき/していないとき」の判定に使えそうですね!

次は location.host、location.hostname をします。

URL取得方法

「tashumist.com」が取得できました。

次に location.pathname をします。

URL取得方法

「blog」が取得できました。

ページごとの処理ができるようになります。

次に location.search、 location.hash をします。

URL取得方法

通常はパラメータやページ内リンクを取得できますが、ここではURIに記述がなかったため空文字になっています。

location.port も同様です。

URL取得方法

なんとなく理解できましたでしょうか?

全てを画像で紹介!

パッと一目でわかるような図が自分でも欲しいと思ったので作成しました。
ぜひ参考にしてみてください!

URL取得方法

コメント

タイトルとURLをコピーしました