JavaScript アドバンス

JavaScript Window Location

1. Window Location オブジェクト

window.location オブジェクトを使用すると、現在のページのアドレス（URL）を取得したり、ブラウザを新しいページにリダイレクトしたりすることができます。

この window.location オブジェクトは、window プレフィックスを省略して記述することも可能です。

主なプロパティとメソッドの例：

  • window.location.href：現在のページの href（URL）を返す
  • window.location.hostname：ウェブホストのドメイン名を返す
  • window.location.pathname：現在のページのパスとファイル名を返す
  • window.location.protocol：使用されているウェブプロトコル（http: または https:）を返す
  • window.location.assign()：新しいドキュメントをロードする

2. Window Location Href

window.location.href プロパティは、現在のページの完全なURLを返します。

2.1 コード例

現在のページの href（URL）を表示します。

document.getElementById("demo").innerHTML = 
"ページのロケーションは " + window.location.href;

3. Window Location Hostname

window.location.hostname プロパティは、現在のページのインターネットホスト名を返します。

3.1 コード例

ホスト名を表示します。

document.getElementById("demo").innerHTML = 
"ページのホスト名は " + window.location.hostname;

4. Window Location Pathname

window.location.pathname プロパティは、現在のページのパス名を返します。

4.1 コード例

現在のURLのパス名を表示します。

document.getElementById("demo").innerHTML = 
"ページのパスは " + window.location.pathname;

5. Window Location Protocol

window.location.protocol プロパティは、ページのウェブプロトコルを返します。

5.1 コード例

ウェブプロトコルを表示します。

document.getElementById("demo").innerHTML = 
"ページのプロトコルは " + window.location.protocol;

6. Window Location Port

window.location.port プロパティは、現在のページのインターネットホストポート番号を返します。

6.1 コード例

ポート番号を表示します。

document.getElementById("demo").innerHTML = 
"ポート番号は " + window.location.port;

7. Window Location Assign

window.location.assign() メソッドは、新しいドキュメントをロードします。

7.1 コード例

新しいドキュメントをロードする実装です。

<html>
<head>
<script>
function newDoc() {
  // 指定したURLへ遷移
  window.location.assign("https://www.google.com")
}
</script>
</head>
<body>

<input type="button" value="新しいドキュメントをロード" onclick="newDoc()">

</body>
</html>