JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでWebページのプロトコル（http／https）を取得する方法

現在開いているWebページが「http」なのか「https」なのかを判定したい場面は、開発中によくあります。そんなときに役立つのが、ブラウザが標準で提供している window.location オブジェクトです。

window.location.protocol の基本

window.location.protocol プロパティを参照すると、そのページで使用されているプロトコルを文字列として取得できます。返される値には末尾のコロン（:）が含まれるため、結果は「http:」または「https:」のようになります。

たとえば、SSLで保護されたサイトでは「https:」が返され、保護されていない通常のサイトでは「http:」が返されます。この値を利用すれば、ページが安全な通信（HTTPS）で表示されているかどうかをJavaScriptから簡単にチェックできます。

サンプルコード

以下は、実際にプロトコルを取得して画面に表示するシンプルな例です。

<!DOCTYPE html>
<html>
<body>
  <script>
    document.write("http または https の判定：<br>このページのプロトコルは " + window.location.protocol + " です。");
  </script>
</body>
</html>

このHTMLファイルをブラウザで開くと、「このページのプロトコルは https: です。」のように、実際の通信プロトコルが表示されます。

補足：locationオブジェクトの他の便利なプロパティ

window.location オブジェクトには、protocol 以外にもURLに関する情報を取得できるプロパティが多数用意されています。

  • window.location.host … ホスト名とポート番号（例：example.com:8080）
  • window.location.hostname … ホスト名のみ（例：example.com）
  • window.location.pathname … パス部分（例：/page/index.html）
  • window.location.href … URL全体

これらを組み合わせることで、現在のページのURL情報を柔軟に扱うことができます。特にHTTPSかどうかの判定は、セキュリティに関わる処理やAPIへのリクエスト先の切り替えなどでよく使われるテクニックなので、覚えておくと便利です。

  1. JavaScriptでWebページをリダイレクトする方法をわかりやすく解説

    Webページを閲覧していると、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ移動させられたという経験はありませんか？これは「ページリダイレクト（転送）」と呼ばれる仕組みが働いているためです。JavaScriptを使えば、クライアント側でページリダイレクトを非常に簡単に実装できます。サイト訪問者を新しいページへ誘導したい場合は、<head>セクションに数行のコードを追加するだけで実現可能です。サンプルコード：ボタンクリックでトップページへリダイレクト以下のコードを実行すると、JavaScriptを使ってHTMLページをリダイレクトする方法を実際に確

  2. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト