jQueryで現在URLを取得するには？

Webページを構築する際、現在のページのURLを取得したい場合があります。例えば、現在表示しているページと同じドメインの別のページにリンクを貼ったり、現在ページのURLを元に処理を変更したりするケースが考えられます。jQueryを使うと、この処理を簡単に実現できます。

$(location).attr('href') を使う

jQueryで現在ページのURLを取得するには、$(location).attr('href')を使用します。 locationは、ブラウザの組み込みオブジェクトであり、現在のページに関する情報を持っています。 jQueryの$()で囲むことで、jQueryオブジェクトとして扱うことができます。 attr('href')は、指定した属性の値を取得するメソッドです。ここでは、href属性、つまりURLを取得しています。

コード例


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>現在URLの取得</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 現在URLを取得
      var currentUrl = $(location).attr('href');

      // 取得したURLを表示
      $("#current-url").text(currentUrl);
    });
  </script>
</head>
<body>

  <p>現在のURL： <span id="current-url"></span></p>

</body>
</html>

コードの説明

1. $(document).ready(function() { ... });: ページが完全に読み込まれた後に、括弧内の処理を実行します。 2. var currentUrl = $(location).attr('href'); : 現在ページのURLを取得し、変数currentUrlに格納します。 3. $("#current-url").text(currentUrl);: IDが"current-url"の要素(ここではspan要素)に、取得したURLを設定します。

実行結果

例えば、上記コードを"https://www.example.com/page.html"というURLのページに設置した場合、"現在のURL: https://www.example.com/page.html"と表示されます。

$(location)のプロパティ

$(location)はattr('href')以外にも、様々なプロパティを持っています。主なプロパティを以下の表にまとめます。

プロパティ	説明
href	ページの完全なURL
protocol	使用されているプロトコル（例: "http:"）
hostname	ホスト名（例: "www.example.com"）
port	ポート番号（例: "80"）
pathname	URLのパス部分（例: "/page.html"）
search	クエリ文字列（例: "?key=value"）
hash	フラグメント識別子（例: "#section1"）

これらのプロパティを利用することで、URLの特定の部分のみを取得することも可能です。

まとめ

本記事では、jQueryを使用して現在ページのURLを取得する方法について解説しました。 $(location).attr('href') を使用することで、簡単にURLを取得することができます。また、$(location)はURLの各要素を取得できるプロパティも提供しています。これらの機能を活用することで、Webページに動的な要素を追加することができます。

参考資料

* jQuery API Documentation * Location - Web API | MDN

よくある質問

Q1: `$(location).attr('href')` と `window.location.href` の違いは何ですか？

A1: どちらも現在ページのURLを取得できます。window.location.href は JavaScript の標準的な方法であり、 $(location).attr('href') は jQuery を使用した方法です。 jQuery を使用している場合は、 $(location).attr('href') を使用するのが一般的です。

Q2: URLの特定の部分のみを取得したい場合はどうすればよいですか？

A2: $(location)オブジェクトの各プロパティを利用することで、URLの特定の部分のみを取得できます。例えば、ホスト名のみを取得したい場合は $(location).attr('hostname') を使用します。

Q3: 取得したURLを使って別のページに遷移したい場合はどうすればよいですか？

A3: window.location.href = 新しいURL; のように、window.location.href に遷移先のURLを代入することでページ遷移が可能です。

その他の参考記事:jquery href 取得