記事の内容
location
locationは、Webページのアドレスを取得したり、指定したアドレスに移動したりできるオブジェクトです。
location
記法
location.href = “url”;
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>locationに関して</title>
</head>
<body>
<button id="location_btn">遷移</button>
<button id="protocol_btn">protocol表示</button>
<script src="main.js"></script>
</body>
</html>// 遷移ボタン要素を取得
let location_btn = document.getElementById("location_btn");
// ボタンにクリックイベントリスナーを追加
location_btn.addEventListener("click", function () {
location.href = "URL";
});
// プロトコルボタン要素を取得
let protocol_btn = document.getElementById("protocol_btn");
// ボタンにクリックイベントリスナーを追加
protocol_btn.addEventListener("click", function () {
let protocol = location.protocol;
confirm(protocol);
});出力結果
locationの色々
| 要素名 | 説明 |
|---|---|
| location.protocol | 現在のプロトコル情報(http:など)を取得する |
| location.host | プロトコル情報を除外したURLを取得する (port情報あり) |
| location.hostname | プロトコル情報を除外したURLを取得する (port情報なし) |
| location.port | ポート番号を取得・設定する |
| location.pathname | URLでパスの部分を取得・設定する |
| location.search | URL内のクエリ情報を抽出して取得する |
| location.hash | URL内のハッシュ情報を抽出して取得する |
| location.origin | プロトコルやポートを含めたURLを取得する |