JavaScriptで表示中のページがHTTPかHTTPSかを判別する方法

JavaScriptを使って現在表示中のページがHTTPかHTTPSかを判別する方法です。
またHTTPの場合にHTTPSのページにリダイレクトする方法も紹介しています。
httpかhttpsかを判別する方法
location.protocolを使った現在表示中のページがHTTPかHTTPSかを判別する方法になります。
location.protocolは表示中のページがHTTPSの場合は「https:」、HTTPの場合は「http:」を返します。
動作サンプル
See the Pen JavaScript location.protocol by yochans (@yochans) on CodePen.
サンプルコード
HTML
<p id="log"></p>
JavaScript
const log = document.getElementById('log');
if(location.protocol == 'http:'){
log.innerHTML = `表示中のページはHTTPです`;
}else if(location.protocol == 'https:'){
log.innerHTML = `表示中のページはHTTPSです`;
}
サンプルではログ表示用にlogというidのp要素にinnerHTMLを使ってHTTPSかHTTPかを判別をした結果を表示しています。
HTTPの場合にHTTPSにリダイレクトする方法
JavaScriptでHTTPの場合にHTTPSのページにリダイレクトする方法です。
※基本的には、.htaccessやphpなどサーバーサイドでリダイレクトする方法が推奨されます。
JavaScript
const log = document.getElementById('log');
if(location.protocol == 'http:'){
location.href=’https://(転送先のURL)’;
}
ディスカッション
コメント一覧
まだ、コメントがありません