JavaScriptのlocation.protocolプロパティとは？使い方とサンプルコードを解説
JavaScriptのlocation.protocolプロパティとは？
JavaScriptのlocation.protocolプロパティは、現在表示しているページのURLで使用されているプロトコルを文字列として返します。戻り値は「https:」や「http:」のように、末尾のコロンまで含まれる点に注意しましょう。
このプロパティを活用すると、ページがHTTPS（暗号化された安全な通信）で配信されているかどうかを簡単に判定できます。たとえば、セキュリティの状態に応じて処理を切り替えたい場合や、HTTP接続時に警告を表示したい場合などに役立ちます。
サンプルコード
以下は、ボタンをクリックすると現在のページのプロトコルを画面に表示するシンプルなデモです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample{
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>Location protocol プロパティ</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、現在のロケーションプロトコルを取得できます
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = 'このWebサイトで使用されているプロトコル = ' + location.protocol;
});
</script>
</body>
</html>実行結果
「CLICK HERE」ボタンをクリックすると、以下のように現在のページで使用されているプロトコルが赤字で表示されます。
ポイントまとめ
location.protocolは、現在のURLのプロトコルを「https:」のような形式で返す- 値の参照により、HTTPSかどうかの判定などに簡単に活用できる
- 主要なブラウザすべてでサポートされている標準的なプロパティ
-
JavaScriptのlocation.protocolプロパティの使い方を解説！現在のURLプロトコルを取得する方法
location.protocolプロパティとは JavaScriptのlocation.protocolプロパティは、現在表示しているページのURLに含まれるプロトコル（通信方式）を取得または設定するために使用されます。プロトコルとは、URLの先頭部分にある「http:」「https:」「file:」などのことで、ブラウザがどのような方式でリソースにアクセスしているかを示すものです。 このプロパティは読み取り専用として扱われることが多く、主に現在のページが安全な接続（HTTPS）かどうかを判定したい場合などに活用されます。 主な特徴 現在のURLのプロトコルを文字列として返す（例：「htt
-
【HTML DOM入門】Locationオブジェクトのprotocolプロパティの使い方を解説
JavaScriptのLocationオブジェクトが持つprotocolプロパティは、現在のページのURLで使用されているプロトコル（スキーム）に対応する文字列を取得・設定できます。返される値にはコロン（:）が含まれ、「file:」「http:」「https:」などの形式になります。 例えば、「https://www.example.com/page.html」というURLの場合、location.protocolは「https:」という文字列を返します。 構文 protocolプロパティの基本的な構文は以下の通りです。 値を取得する場合 location.protocol 値を設定する場合