3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

(HTML)JavaScriptの有効、無効でページの内容を切り替える方法

こちらを参考にしました。
↑で記述されているように2つの方法があるみたいです。

1. 基本エラーページを表示していて、JS 有効時に正常なページを表示する
2. JS が無効なら noscript タグの部分に META でエラーページへ誘導する

上記の1の方法でやってみました。

<html><head>
    ....
</head>

<body>
<!--JavaScript無効対策-->
<div id="JSNG" class="nonJs">
<p>JavaScriptが無効にされています。本サイトはJavaScriptを有効にしてご覧ください。</p>
</div>

<script type="text/javascript">
 document.getElementById("JSNG").style.display = "none";
</script>

<div class="mainContents" id="mainContents" >
ここにメインコンテンツを記述。
</div>

<!--JavaScript無効化対策-->
<script type="text/javascript">
 document.getElementById("mainContents").style.display = "inline-block";
</script>

</body>
</html>

これで、JavaScriptが無効なら id=JSNG のブロック要素のみが表示され、有効なら id=mainContents のブロック要素のみが表示される仕組みです。