JavaScriptが動作しない時のコンテンツを記述したい

最終更新日

JavaScriptが動作しないブラウザに、代わりになるコンテンツを表示する必要があるときに使用します。JavaScriptが動作しないブラウザからアクセスされたときに、JavaScriptが動作しなくても不都合がないように代わりのコンテンツを表示するには、<noscript>タグを使用します。JavaScriptが動作しないときは別のコンテンツを表示するHTMLとCSSを追加します。

<noscript>表示するコンテンツ(HTML)</noscript>

JavaScriptを使用するすべてのWebページに<noscript>タグを含める必要はありません。最近のブラウザはJavaScriptの動作をオフにする方法が難しくなっているため、JavaScriptが機能しないユーザーはほとんどいないと考えられます。そのため、代わりのコンテンツを用意する労力が見合わないからです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
   
</head>
<body>
    <div>
        <p>ユーザーIDを忘れた方</p>
        <button id="btn">ユーザーIDの再発行</button>
    </div>
    <noscript>
        <style>
            .forget-userid{
                display: none;
            }
        </style>
        <div>
            ユーザーIDを忘れた方は<a href="#">こちらのページで再発行してください。</a>
        </div>
    </noscript>
    <script>
            (function(){
                document.getElementById('btn').addEventListener('click',function(e){
                    window.alert('ユーザーIDを再発行します。よろしいですか?')
                })
            })();
    </script>
</body>
</html>