JavaScript | 現在のページURL情報を取得する方法

Javascriptで現在アクセスのあるページのURL情報を取得する方法を紹介しています。

現在のページURL情報を取得する

JavascriptのLocationインターフェイスを使ってページのURL情報を取得する方法のサンプルコードまとめです。

サンプルでは取得するページのURLが「https://1-notes.com/sample/?p=123」だった場合の各取得情報の結果を紹介しています。

location.origiはオリジンの標準形を収めたURLを取得します。

JavaScriptのwindow.location.originにて現在のページURLを取得するサンプルコードです。

let origin = location.origin;

console.log(origin);
// https://1-notes.com/sample/?p=123

location.hrefはURL全体の文字列を取得します。

let href = location.href;

console.log(href);
// https://1-notes.com/sample/?p=123

location.hostnameはURLからドメインの文字列情報を取得します。

let hostname = location.hostname;

console.log(hostname);
// 1-notes.com

location.pathnameはURLのパス部分を/付きで取得します。

let pathname = location.pathname;

console.log(pathname);
// /sample/

location.searchはURLに付与されているパラメータ、クエリ文字などを取得します。

let search = location.search;

console.log(search);
// ?p=123

Location.hashは#にて指定されているフラグメント識別子を取得します。

取得するページのURLを「https://1-notes.com/sample/#hash」とします。

let hash = location.hash;

console.log(hash);
// #hash

location.protocolはURLのプロトコルスキームを取得します。

let protocol = location.protocol;

console.log(protocol);
// https:

URLにポート番号である場合、そのポート番号を取得します。

let port = Location.port;

console.log(port);
// 8000 など

Posted by Yousuke.U

まだ、コメントがありません