開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2022年3月3日 (木)

ブラウザのJavaScript が無効時に画面操作させない強化ガジェット

ブラウザ側で JavaScript が無効化されている場合、
サイトに JavaScript による制御を入れても当然動作しません。
意図せず無効になっている場合、正しくデータが登録されずに後続の処理に影響が出てくる可能性もあります。
今回、JavaScriptが無効状態の場合に、画面を操作させない強化ガジェットを作成いたしました。
CSS で操作を無効化しているため、完全に制御できるわけではございませんので、ご了承ください。

noscriptタグ

noscriptタグは、クライアント側で JavaScript が無効になっている場合に表示されるタグとなります。
HTML4.01では、noscriptタグを head にセットすることができませんでしたが、
HTML5では、head にセットが可能となっています。
また、noscript要素の中に link要素、style要素、meta要素を配置もできます。
こちらを使って作成いたします。

エラーメッセージ

今回は、エラーメッセージをフリーコンテンツ ブロックで作成しております。
サンプル作成しておりますが、自由にデザインは変更可能です。

フリーコンテンツ
<noscript>
    <!-- 以下は表示メッセージに応じて変更 -->
    <div class="noScriptArea">
        <h2>JavaScript を有効にしてください。</h2>
    </div>
</noscript>
CSS
/* エラーメッセージが重なるCSS */
div.noScriptArea {
    z-index: 1;
    position: absolute;
    width: 100%;
}
/* 表示枠のデザインに合わせて調整 */
div.noScriptArea h2{
    width: 50%;
    margin: auto;
    padding: 1rem 2rem;
    background: #f4f4f4;
    text-align: center;
}
デザインイメージ

ページ

JavaScript無効のメッセージを表示させるページは、
エラーメッセージ用のフリーコンテンツ と 通常表示させるブロックを追加します。
注意点として、エラーメッセージ用のフリーコンテンツを1番上に持って来てください。

ブロックの設定が完了しましたら、下記を head タグに設定します。

head
<noscript>
    <style>
        /* 操作無効化 */
        body{pointer-events:none;}
    </style>
</noscript>

全ページに反映したい場合、共通ソースの head に設定をお願いします。
共通ソースに設定した場合、すべてのページに反映することができます。
エラーメッセージ用のフリーコンテンツが追加せず、head に設定した場合、
操作ができない かつ、エラーメッセージも表示されない状態になってしまします。ご注意ください。

CSSで操作を制御しているため、完全に制御できるわけではございません。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

解決しない場合はこちら コンテンツに関しての
要望はこちら