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 など)を返します。無い場合は何も返しません。

ここは旧トップページ＞日曜プログラミング