js_getlocation
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| — |
js_getlocation [2018/05/14 21:23] (現在) 管理者 作成 |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| + | {{tag>プログラミング関連 Javascript}} | ||
| + | [[start]]＞[[programming_start]] | ||
| + | ====== 現在のページアドレスを取得する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 など)を返します。無い場合は何も返しません。 | ||
| + | |||
| + | |||
| + | ---- | ||
| + | [[start]]＞[[programming_start]] | ||
js_getlocation.txt · 最終更新: 2018/05/14 21:23 by 管理者
