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

【初心者向け】JavaScriptで現在のURLを取得する方法をわかりやすく解説

JavaScriptで現在表示しているページのURLを取得するには、window.location.hrefプロパティを使用します。このプロパティは、プロトコル・ドメイン・パス・クエリ文字列を含む完全なURLを文字列として返します。

実装例：現在のURLを取得して表示する

以下のコードは、ページのURLを取得し、画面上に表示するシンプルなサンプルです。

<!DOCTYPE html>
<html>
   <body>
      <h3>現在のURLを取得</h3>
      <p id="test"></p>
      <script>
         document.getElementById("test").innerHTML = "このページのURL: " + window.location.href;
      </script>
   </body>
</html>

このHTMLファイルをブラウザで開くと、「このページのURL: ～」という形式で、現在開いているページのURLが表示されます。

window.locationオブジェクトの主なプロパティ一覧

window.locationオブジェクトには、URLの特定の部分だけを取り出すための便利なプロパティが多数用意されています。用途に応じて使い分けましょう。

  • window.location.href … 完全なURL全体を取得
  • window.location.protocol … プロトコル（例：「https:」）を取得
  • window.location.host … ホスト名とポート番号を取得
  • window.location.hostname … ドメイン名のみを取得
  • window.location.pathname … パス部分を取得
  • window.location.search … クエリ文字列（「?」以降）を取得
  • window.location.hash … ハッシュフラグメント（「#」以降）を取得

たとえば、URLが「https://example.com/page?id=123」である場合、window.location.hostnameは「example.com」を、window.location.searchは「?id=123」を返します。

このように、window.locationオブジェクトを活用することで、URLから必要な情報だけを簡単かつ確実に取得できます。

  1. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo

  2. JavaScriptでドキュメントのタイトルと完全なURLを取得する方法

    JavaScriptのHTML DOMは、HTMLデータへアクセスし操作するための基本的なメソッドを数多く提供しています。ドキュメントのタイトルやURLを取得したい場合も、それぞれ専用のプロパティが用意されています。タイトルにはdocument.title、URLにはdocument.URLを使うことで、簡単に値を取り出せます。ここでは、それぞれの使い方を順番に見ていきましょう。ドキュメントのタイトルを取得するドキュメントのタイトルを取得するには、JavaScriptのHTML DOMが提供するdocument.titleプロパティを使用します。このプロパティは、HTML内の<title