JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで現在のURLを取得する方法を徹底解説！window.locationの使い方

Web開発において、現在表示しているページのURLを取得したい場面はよくあります。たとえば、ページの状態に応じて処理を分岐させたり、シェア機能を実装したりするケースです。

JavaScriptでは、window.location オブジェクトを使うことで、現在のURLを簡単に取得できます。この記事では、基本的な使い方から実用的なサンプルコードまで、わかりやすく解説します。

window.location.hrefでURLを取得する

最もよく使われるのが window.location.href プロパティです。これは、現在のページの完全なURL（href）を文字列として返します。

以下のように記述するだけで、URLを取得できます。

const url = window.location.href;
console.log(url); // 例: https://example.com/page?id=123

実際のサンプルコード

ここでは、取得したURLを画面に表示し、アラートでも確認できる簡単なサンプルを紹介します。MVCフレームワークのプロジェクトでもそのまま利用できるコードです。

<html>
   <body>
      <div>
         <p id ="dd"></p>
      </div>
      <script type="text/javascript">
         // URLをアラートで表示
         alert(window.location.href);

         // ページ内にURLを出力
         var iid = document.getElementById("dd");
         iid.innerHTML = "URL is " + window.location.href;
      </script>
   </body>
</html>

このコードを実行すると、ページ読み込み時にアラートでURLが表示され、「dd」というidを持つ段落要素にもURLが出力されます。

window.locationの主なプロパティ一覧

window.locationオブジェクトには、href以外にも便利なプロパティが多数用意されています。用途に応じて使い分けると、より柔軟な処理が可能になります。

  • window.location.href … ページ全体のURL（プロトコル、ドメイン、パス、クエリなどを含む）
  • window.location.protocol … プロトコル（例： https:）
  • window.location.host … ホスト名とポート番号（例： example.com:8080）
  • window.location.hostname … ホスト名のみ（例： example.com）
  • window.location.pathname … パス部分（例： /page/index.html）
  • window.location.search … クエリ文字列（例： ?id=123）
  • window.location.hash … ハッシュ（アンカー）部分（例： #section1）

まとめ

JavaScriptで現在のURLを取得するには、window.location.href を使うのが基本です。URL全体が必要な場合はhref、特定の部分だけが必要な場合はhostnameやpathnameなどのプロパティを使い分けましょう。

URLの取得はログ出力や条件分岐、ページ遷移制御など、さまざまな場面で活躍します。ぜひ実際のプロジェクトで活用してみてください。

  1. JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

    JavaScriptでHTML要素に適用されているCSSプロパティの現在の値（計算済みスタイル）を取得するには、window.getComputedStyle()メソッドを使用します。このメソッドは、対象の要素に適用されたすべてのスタイル情報を含むオブジェクトを返します。返されたオブジェクトに対してgetPropertyValue()メソッドを呼び出せば、任意のCSSプロパティの値を文字列として取得できます。インラインスタイルが設定されていない場合でも、外部CSSや継承によって最終的に適用されている値を取得できるのが大きな特徴です。基本構文const element = document.qu

  2. AndroidのWebViewで現在地（位置情報）を取得する方法を徹底解説

    この記事では、AndroidアプリのWebView内でWebページの位置情報APIを使い、現在地を取得する方法をステップごとに解説します。WebViewでジオロケーションを有効化するポイントは、JavaScriptの許可とsetGeolocationEnabled(true)の設定、そしてマニフェストへの権限追加です。全体の流れ実装は以下の4ステップで完了します。Android Studioで新規プロジェクトを作成するレイアウトファイル（activity_main.xml）にWebViewを配置するMainActivity.javaでWebViewの設定を行うAndroidManifest.x