JavaScript locationオブジェクト

locationオブジェクトはWindowオブジェクトの一部であり、window.locationプロパティを通じてアクセスできる。

プロパティ

window.locationオブジェクトには、次に示すプロパティがある。

locationオブジェクトのプロパティ
プロパティ 説明
hash URLのアンカー部分
host URLのホスト名とポート番号
hostname URLのホスト名
href URL全体
pathname URLのパス名
port URL用にサーバが使用するポート番号
protocol URLのプロトコル
search URLのクエリ部分

メソッド

window.locationオブジェクトには、次に示すメソッドがある。

locationオブジェクトのメソッド
メソッド 説明
assign() 新規文書のロード
reload() 現在の文書のリロード
replace() 現在の文書を新しいものに置き換える。

host

location.hostはURLのホスト名とポート番号を表わすプロパティである。

<p>location.host: <span id="host"></span></p>

<script>
  document.getElementById("host").innerHTML = location.host
</script>

上記JavaScriptの実行結果を次に示す。

location.host:

hostname

location.hostnameはURLのホスト名を表わすプロパティである。

<p>location.hostname: <span id="hostname"></span></p>

<script>
  document.getElementById("hostname").innerHTML = location.hostname
</script>

上記JavaScriptの実行結果を次に示す。

location.hostname:

href

location.hrefはURL全体を表わすプロパティである。

<p>location.href: <span id="href"></span></p>

<script>
  document.getElementById("href").innerHTML = location.href
</script>

上記JavaScriptの実行結果を次に示す。

location.href:

hrefプロパティに値を設定すると、そのURLに遷移する。

<button id="home">ホーム</button>

<script>
  function example(element, url) {
    element.addEventListener("click", function(){
      location.href = url
    })
  }
  example(document.getElementById("home"), "https://segakuin.com/")
</script>

上記JavaScriptの実行結果を次に示す。

pathname

location.pathnameはURLのパス名を表わすプロパティである。

<p>location.pathname: <span id="pathname"></span></p>

<script>
  document.getElementById("pathname").innerHTML = location.pathname
</script>

上記JavaScriptの実行結果を次に示す。

location.pathname:

port

location.portはURL用にサーバが使用するポート番号を表わすプロパティである。

<p>location.port: <span id="port"></span></p>

<script>
  document.getElementById("port").innerHTML = location.port
</script>

上記JavaScriptの実行結果を次に示す。

location.port:

protocol

location.protocolはURLのプロトコルを表わすプロパティである。

<p>location.protocol: <span id="protocol"></span></p>

<script>
  document.getElementById("protocol").innerHTML = location.protocol
</script>

上記JavaScriptの実行結果を次に示す。

location.protocol:

location.searchはURLのクエリ部分を表わすプロパティである。

<p>location.search: <span id="search"></span></p>

<script>
  document.getElementById("search").innerHTML = location.search
</script>

上記JavaScriptの実行結果を次に示す。

location.search: