JavaScriptでURLを表示する方法

JavascriptでURLを表示するには？

Webページの開発において、JavaScriptを使って現在のURLを取得し表示したい場合があります。例えば、ユーザーが現在どのページを閲覧しているかを表示したり、特定のページからのみアクセス可能な機能を実装する際に役立ちます。

window.locationオブジェクト

JavaScriptでURLを扱うには、window.locationオブジェクトを使用します。このオブジェクトは、現在のURLに関する情報を保持しており、様々なプロパティやメソッドを提供しています。

プロパティ/メソッド	説明
`href`	URL全体を取得します。
`protocol`	URLのプロトコル (http: や https: など) を取得します。
`hostname`	URLのホスト名を取得します。
`port`	URLのポート番号を取得します。
`pathname`	URLのパス部分を取得します。
`search`	URLのクエリ文字列を取得します。
`hash`	URLのフラグメント識別子を取得します。

window.location.hrefプロパティを使って、現在のURLを取得し、コンソールに出力してみましょう。以下のコードをウェブページのスクリプト内に記述します。


<script>
  var currentUrl = window.location.href;
  console.log(currentUrl);
</script>

このコードを実行すると、ブラウザの開発者コンソールに現在のページのURLが表示されます。

URLの表示は、様々な場面で応用できます。ここでは、いくつかの例を紹介します。