JavaScript の有効/無効を判定（判別）して表示する内容を変更する方法

相変わらず（ってか仕事でだけど） JavaScript ネタがちょっと旬な今日この頃です。

・・・っていってもこれまた世の中で旬な jQuery とか XPath の話じゃありません。

さて今回は、JavaScript が有効であることが前提のサイトを作る場合に、ブラウザの設定で JavaScript が無効になっている場合はページの表示をどうするか？っていう話です。JS が無効になっていたら有効にする設定は？ページみたいなのに誘導するアレです。

試しに Gmail を JS 無効でひらいてみた。当たり前だけどちゃんとエラーページが表示されました。

- スポンサーリンク -

さて JS 無効時の処理方法として２つの方法があると思ってます。（ってか他にももっとあるかもしれませんが、今ぱっと思いつきませんでした・・・）

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

でお奨めは１の方法かと思います。Gmail は実際１の方法をとっています。

基本エラーページを表示していて、JS 有効時に正常なページを表示する

めちゃくちゃ簡単な例で示すとこんな感じです。JS 無効時に表示する部分と JS 有効時に表示する部分を用意します。初めは JS 無効時部分が style.display = block; 設定で、JS 有効時部分が style.display = none; にしておきます。

とすると、JS 無効設定になっているとエラー画面が表示されたままになっていて、JS が有効になっていると本来表示するものが表示されるように見えます。Gmail は実際には JS が有効なら Ajax でサーバからコンテンツ取得してごにょごにょと処理が続くわけですが考え方はそんな感じ。

サンプルはこんな感じです。（JS を有効/無効でお楽しみ下さい）

<html><head>
<title>Javascript Enable Check - test</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
</head><body>

<div id="JSNG" style="width: 400px; text-align: left; border: 5px solid #ffaaaa; padding: 10px;">
<p>JavaScript が無効化されています。</p>
</div>

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

<div id="JSOK" style="display:none; width: 400px; text-align: left; border: 5px solid #aaaaff; padding: 10px;">
<p>JavaScript が有効になっています！</p>
</div>

<script>  document.getElementById("JSOK").style.display = "block";</script>

</body></html>

JS が無効なら noscript タグの部分に META でエラーページへ誘導する

もう一つの方法は、JS が有効であれば本来表示したいコンテンツの　URL へリダイレクトして、JS が無効であれば noscript タグ部分に meta タグを仕込んでおいてエラーページへリダイレクトするって方法です。

ちょっと調べてみたら、この方法で説明しているところもちょこちょこ見受けられたのですが、JS の設定を変更してリロードしても JS の有効/無効ですでに画面遷移した後のページを表示しているので即座に JS の有効/無効の表示の切り替えがユーザに表示振り分けが反映されるわけではありません。

元々のページを改めて閲覧したときに初めて表示されるコンテンツ（リダイレクトされる先）が変更できるといったイメージです。※バックボタンで戻ってもうまくいかないことでしょう。location.href でなくって location.replace 使って書き換えるサンプルだし。

サンプルはこんな感じです。（JS を有効/無効でお楽しみ下さい）

<html><head>
<title>Javascript Enable Check - test</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="nocache"> 
<script type="text/javascript">
<!-- 
if(typeof parent != "undefined") { location.replace("js_ok.html"); }
// -->
</script>
<noscript>
<META HTTP-EQUIV=Refresh CONTENT="0; URL=js_ng.html">
</noscript>

</head>
<body>
</body></html>

ちょこちょこっとこのネタ関連を調べてみましたけど、うまくまとめになっているページが見つからなかったので適当にまとめて晒しておきました。

ところで、最近こんな本を買いました。この本の内容レベルまで prototype.js についてまとめることを考えるとぞっとします。そう考えると安い買い物でした。