JavaScript未設定のブラウザへの注意文表示

最近のホームページはJavaScriptを使用することが普通になって来ました。

魅力のある美しい動きを簡単に実現できるからです。

しかし、ごく稀にブラウザの設定が無効になっている場合があります。

そういうブラウザ設定の場合にTwitterやFacebookなどのサイトはJavaScriptの設定を促す注意文が出ます。↓ こんなのです。

今回の話題は、このJavaScript設定の注意文を自分のホームページに出す方法のご紹介です。

方法には大きく分けて2種類あります。

一つはJavaScriptの機能を使う方法。もう一つはHTML記述などでJavaScriptが有効であるかを検出する方法です。

先ず、JavaScriptの機能を使う方法を説明します。

始めに注意文を表示させたい場所に注意文を表す表記をします。

＜p id=”no-javascript”＞JavaScriptを使用しています。お使いのブラウザの設定を有効にして下さい。＜/p＞　（＜＞は全角を使用しています）

そして、JavaScript（jQuery）の記述で、以下の様に書きます。

jQuery( ‘#no-javascript’ ).css( ‘display’, ‘none’ );

つまり、JavaScript（jQuery）が有効の場合には注意文表記をJavaScriptで削除するわけです。

技術的にはこの方法が最も直接的（有効な機能で削除するから）でお勧めなのですが、ひとつ問題があります。

ブラウザは初めて読み込むホームページのHTML・CSSファイル、画像ファイル、JavaScriptライブラリーファイルなどを独立に読み込みます。

一般的にHTML・CSSファイルは軽いですから先に読み込んで実行（表示）します。

その後に読み取りが終了した画像やJavaScriptライブラリーなどを有効にして行きます。

察しの良い方はお分かりだと思います。そうです。JavaScript機能が有効になるまではHTML上にあるJavaScript設定の注意文が表示されるのです。

短い期間ですが、注意文が表示されるのは面白くありません。

JavaScript機能が有効になってからHTML表示をさせる方法もありますが、そこまで複雑にして実現する表示でもありません。

そこで、二つ目の方法のご紹介。

これはHTMLにJavaScript機能の有無を判断させる方法です。使い方はものすごく簡単です。

＜noscript＞
＜p id=”no-javascript”＞JavaScriptを使用しています。お使いのブラウザの設定を有効にして下さい。＜/p＞
＜/noscript＞　（＜＞は全角を使用しています）

上記の様に＜noscript＞＜/noscript＞タグで挟むだけです。

HTMLがJavaScript機能の有無を判断して無効の時はタグ内の表示を有効にします。2次的ですが最近のほとんどのサイトはこちらの方法を採用している様です。

これで、ファイル読み込み時のチラリ表示が回避されます。

お試しください。