Location.host - ホスト名とポートを取得、変更する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、Locationオブジェクトのhostは、ホスト名とポート番号を参照するプロパティです。

説明

Locationオブジェクトのhostプロパティは、ホスト名とポート番号を含みます。純粋なホスト名だけを参照したい場合はhostnameプロパティを利用しましょう。

https://syncer.jp:443/index.html#section-1

大抵のウェブサイトでは、サーバーの設定によってhttp(80)、https(443)などのポート番号は表示されません。この場合、ポート番号の部分(:443)は空の文字列になります。

// ホスト名、ポート番号を変更
window.location.host = "syncer-editor.com:1234" ;

https://syncer-editor.com:1234/index.html#section-1

新しく値を指定すれば、現在のホスト名とポート番号を変更できます。これに伴ってページも移動します。パス(/index.html)やフラグメント識別子(#section-1)など、他の部分は一切変わらないので注意が必要です。

サンプルコード

https://syncer.jp:443/index.html#section-1

// ホスト名、ポート番号を取得 ( → "syncer.jp:443" )
var host = window.location.host ;

// ホスト名、ポート番号を変更 ( → https://syncer-editor.com:1234/index.html#section-1 )
window.location.host = "syncer-editor.com:1234" ;

デモ

下記はsyncer-editor.com上のページです。window.location.hostを取得して表示します。なお、ポート番号は表示しない設定になっているので、ホスト名だけとなります。変更は、syncer-editor.com:443からsyncer.jp:80に変更します。syncer.jpではポート番号80に対応してないので、エラー表示になるはずです。URLの変動を確認するには、お手数ですが、新しくウィンドウを開いて下さい。

RUN
HTML
CSS
JavaScript

<p><a href="" target="_blank" class="hyperlink">新しいウィンドウで開く</a></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="get" class="button">取得</button></p> <p><button id="set" class="button">変更</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .hyperlink { font-size: 16px ; font-weight: 700 ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 取得 document.getElementById( "get" ).addEventListener( "click", function() { try { // ホスト名、ポート番号を取得 var host = window.location.host ; // 取得した要素を出力 document.getElementById( "output" ).textContent = host ; // コンソールで内容を出力 console.log( host ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // 変更 document.getElementById( "set" ).addEventListener( "click", function() { try { // ホスト名、ポート番号を変更 window.location.host = "syncer.jp:443" ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リロード document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).innerHTML = "" ; }

構文

string host = Location.host
Location.host = string newHost

返り値

項目	説明
host	現在のURLのホスト名とポート番号。サーバーの設定でポート番号が非表示の場合、該当部分は空の文字列。

指定する値

項目	説明
newHost	新しく設定したいホスト名とポート番号。ホスト名とポート番号はコロン(`:`)で区切る。

外部リンク

HTML Living Standard - WHATWGによる仕様書。

説明

サンプルコード

デモ

構文

返り値

指定する値

関連項目

外部リンク