JavaScript機能がオフの場合に別のコンテンツを表示

広告

JavaScriptの機能がオフになっている場合には<script></script>の間に記述されたスクリプトは実行されません。ただ、単に実行しないだけだと利用者にJavaScriptがオンになっていないので実行されていないことが伝わりません。

Webページのいずれかの箇所に「JavaScriptの機能がオンになっている必要がある」とでも記述しておいても構いませんが、Webページのどの部分に本来JavaScriptが組み込まれていたのかは伝えにくくなります。

<noscript>要素を使うことでJavaScript機能がオフになっている時にだけ別のコンテンツを表示させることが可能です。<noscript>から</noscript>の間にコンテンツを記述します。 

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

具体的には次のように記述します。 

<script type="text/javascript" src="./sample.js">
</script>
<noscript>
<p>JavaScriptがオンになっていないと利用できません</p>
</noscript>

このようにスクリプトを記述した箇所に<noscript>要素を合わせて記述しておいたり、ページの先頭などに単独で記述してJavaScript機能が必要な箇所があることを利用者に伝えることが可能です。特にJavaScriptによって何らかの出力を行っている場合などには、JavaScriptがオフになっていると何も出力されずレイアウトが崩れる場合もあります。その場合の代替表示を<noscript>要素を使って指定しておくことが可能です。

サンプルコード

それでは簡単なサンプルを下記に示します。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript">
document.write("<p>JavaScriptが有効です</p>");
</script>
<noscript>
<p>JavaScriptが無効です</p>
</noscript>

</body>
</html>

上記を実際にブラウザ見てみると次のように表示されます。

p5-1

JavaScriptの機能をオフにして同じページを見ると次のように表示されます。

p5-2

( Written by Tatsuo Ikura )