jQueryでnoscriptを実装するためのお作法

純粋なJavaScriptを利用している場合は、JavaScriptが無効になっている状態でアクセスがあった時のためにnoscriptタグを実装しておくということができますが、jQueryを利用してnoscriptを使う場合にはかなり限定的で簡易的な実装となってしまいます。

jQueryでDOM操作している部分をうまく代替の要素を表示できたり、jQuery内で複数利用しているプラグインに対してJavaScriptが無効になっていた場合、個々に表示を切り替えることができればユーザー側にもわかりやいサイトになります。

CSSとjQueryを使ってNoscriptに実装する

JavaScriptが有効になっている場合、jQuery自体が利用可能になっているため、そのDOM操作のメソッドとCSSを使えば、比較的簡単に実装することができます。

<html>
<head>
<style type="text/css">
.jsenabled {
    font-weight:bold;
    border: 2px solid #0000ff;
    padding: 5px;
    width: 400px;
    display: none;
}

.jsdisabled {
    font-weight:bold;
    border: 2px solid #ff0000;
    padding: 5px;
    width: 400px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
    $(".jsenabled").show();
    $(".jsdisabled").hide();
})
</script>
</head>
<body>
    <div class="jsenabled">JavaScript is enabled</div>
    <div class="jsdisabled">JavaScript is disabled</div>
</body>
</html>

CSSは、ごちゃごちゃ書いていますがほとんどはDIV要素をわかりやすく装飾するためのもので、重要なのはJavaScriptが有効であった場合に機能する、jsenabledというクラス名の中に「display: none:」を設定しておくというものだけです。

要は、JavaScriptが無効だった場合は、この要素が見えないように予め設定しておくというものです。

次に、JavaScriptが有効だった場合はjQueryが動きますのでDOM構築後の$(document).ready時に、JavaScriptが有効の場合のクラス（jsenabled）を表示し、無効だった場合のクラス（jsdisabled）を非表示にするという処理をしています。

実際に動作させてみると

- JavaScriptが有効だった場合

- JavaScriptが無効だった場合