現在のページアドレスを取得するJavaScript

Javascriptで現在表示しているページのアドレスを取得する方法。

デモ

下記のボタンをクリックするとこのページのアドレスをアラートダイアログに表示します。このページではportなど一部の項目は表示されません。

サンプル

<input type="button" value="アドレス取得" onclick="sample1()"><br/ >
<script><!--
function sample1(){
  // url http://www.hoge.com/javascript/url.php?id=1#footer
  var url=location.href;
  // protocol http
  var protocol=location.protocol;
  // port 8080
  var port=location.port;
  // host www.hoge.com
  var host=location.hostname;
  // path /javascript/url.php
  var path=location.pathname;
  // search ?=id1
  var search=location.search;
  // hash #footer
  var hash=location.hash;
  alert("url = "+url+"\nprotocol = "+protocol+"\nport = "+port+"\nhost = "+host+"\npath = "+path+"\nsearch = "+search+"\nhash = "+hash);
}
// -->
</script>

説明

完全なアドレスを取得する方法と部分ごとに分けてアドレスを取得する方法があります。

完全なアドレスの取得

location.href;

「http://www.hoge.com/javascript/url.php?id=1#footer」のようなブラウザのアドレスバーに表示されてるアドレスを返します

プロトコルの取得

location.protocol;

Webサイトでは特殊な状況を除きhttpかhttpsを返します

ポートの取得

location.port;

アドレス http://www.hoge.com:8080/ などポート番号がある場合はその番号(8080)を返します。無い場合は何も返しません。

ホスト名の取得

location.hostname;

ホスト名・ドメイン名(www.hoge.com など)を返します

パス名の取得

location.pathname;

ディレクトリ名はファイル名(/javascript/url.php など)を返します。

クエリ部分の取得

location.search;

?マークから始まるクエリ部分(?=id1 など)を返します。無い場合は何も返しません。

ハッシュ部分の取得

location.hash;

#マークから始まるハッシュ部分(#footer など)を返します。無い場合は何も返しません。

目次