ブラウザのJavaScriptが無効の時に別のコンテンツを表示する

ブラウザで JavaScript が無効になっていると HTML ファイルの中に記述された JavaScript のコードは実行されません。ただ利用者はなぜ何も表示されないのか分かりませんので、 noscript 要素を使用して JavaScript が無効になっているときにだけ別のコンテンツを表示することができます。ここでは ブラウザの JavaScript が無効の時に別のコンテンツを表示する方法について解説します。

(Last modified: )

noscript要素を記述する

例として次のように HTML ファイルの中に JavaScript を記述されているファイルを、 JavaScript が有効な状態のブラウザから表示してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<script>
document.write("<p>こんにちは</p>");
</script>

</body>
</html>

JavaScript のコードが実行されてブラウザには次のように表示されます。

ブラウザのJavaScriptが無効の時に別のコンテンツを表示する(1)

次に同じファイルをブラウザの JavaScript を無効にして開いてみます。

ブラウザのJavaScriptが無効の時に別のコンテンツを表示する(2)

ブラウザの JavaScript が無効になっているとコードが実行されないため、結果としてブラウザには何も表示されません。

このようにブラウザの JavaScript が無効になっているユーザーに対してだけメッセージを表示したい場合には、 noscript 要素を使用します。次のように記述します。

<noscript>
JavaScriptがオフになっているときに表示したいコンテンツ
</noscript>

noscript 要素は、閲覧しているブラウザが JavaScript が無効になっている場合にだけ出力されます。なお noscript 要素に記述するコンテンツは HTML の文を記述します。

使い方としては、 JavaScript のコードを記述している script 要素と一緒に記述したり、単独でページの先頭などに記述します。

<script>
document.write("<p>こんにちは</p>");
</script>
<noscript>
<p>
このサイトではJavaScriptを使用しています
</p>
</noscript>
サンプルコード

次のような HTML ページを作成し、 sample5-1.html という名前で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<script>
document.write("<p>こんにちは</p>");
</script>
<noscript>
<p>
このサイトではJavaScriptを使用しています
</p>
</noscript>

</body>
</html>

最初に JavaScript を有効にした状態でブラウザから先ほど保存した HTML ページを開きます。

ブラウザのJavaScriptが無効の時に別のコンテンツを表示する(3)

次に JavaScript を無効にした状態でブラウザから先ほど保存した HTML ページを開きます。

ブラウザのJavaScriptが無効の時に別のコンテンツを表示する(4)

JavaScript が有効の場合は script 要素内のコードが実行されて画面に出力され、 JavaScript が無効の場合は noscript 要素内の HTML 文が画面に出力されました。

※ 簡潔に記述できるので document.write をここでは使用していますが、現在は document.write の利用は非推奨となっています。 document.write の代わりとして「現在処理を実行しているscript要素を取得(currentScript)>」などを使用されてください。

-- --

ブラウザの JavaScript が無効の時に別のコンテンツを表示する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。