ブラウザの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 を無効にして開いてみます。
ブラウザの 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 を無効にした状態でブラウザから先ほど保存した HTML ページを開きます。
JavaScript が有効の場合は script 要素内のコードが実行されて画面に出力され、 JavaScript が無効の場合は noscript 要素内の HTML 文が画面に出力されました。
※ 簡潔に記述できるので document.write をここでは使用していますが、現在は document.write の利用は非推奨となっています。 document.write の代わりとして「現在処理を実行しているscript要素を取得(currentScript)>」などを使用されてください。
-- --
ブラウザの JavaScript が無効の時に別のコンテンツを表示する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。