あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 現在のページアドレスを取得するJavaScript ======

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

===== デモ =====
下記のボタンをクリックするとこのページのアドレスをアラートダイアログに表示します。
このページではportなど一部の項目は表示されません。
<HTML>
<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>
</HTML>
\\

===== サンプル =====
<code javascript>
<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>
</code>
===== 説明 =====
完全なアドレスを取得する方法と部分ごとに分けてアドレスを取得する方法があります。

==== 完全なアドレスの取得 ====
<code>
location.href;
</code>
「%%http://www.hoge.com/javascript/url.php?id=1#footer%%」のようなブラウザのアドレスバーに表示されてるアドレスを返します
==== プロトコルの取得 ====
<code>
location.protocol;
</code>
Webサイトでは特殊な状況を除きhttpかhttpsを返します
==== ポートの取得 ====
<code>
location.port;
</code>
アドレス %%http://www.hoge.com:%%**8080**/ などポート番号がある場合はその番号(8080)を返します。無い場合は何も返しません。
==== ホスト名の取得 ====
<code>
location.hostname;
</code>
ホスト名・ドメイン名(%%www.hoge.com%% など)を返します
==== パス名の取得 ====
<code>
location.pathname;
</code>
ディレクトリ名はファイル名(/javascript/url.php など)を返します。

==== クエリ部分の取得 ====
<code>
location.search;
</code>
?マークから始まるクエリ部分(?=id1 など)を返します。無い場合は何も返しません。

==== ハッシュ部分の取得 ====
<code>
location.hash;
</code>
#マークから始まるハッシュ部分(#footer など)を返します。無い場合は何も返しません。