サーバサイドでは静的ファイルをサーブするだけなので JavaScript や CSS での対応
ロード後に画面を書き換えだと HTML が重いページだと時間がかかる
ロード完了を待たずに表示されるようにしたい
一番楽なのは CSS で body を 「display: none」 してアラートでメッセージ表示
ただこれだと画面は真っ白
できれば画面にも代替コンテンツを表示したい
普通にやるならたぶん CSS で代替コンテンツ以外を 「display: none」
CSS に⇩を追加して HTML の最初に 「<div id="alternative">コンテンツ</div>」 を入れる
body * {
display: none !important;
}
body > #alternative {
display: block !important;
}
思いつきで JavaScript を使う方法を試してみたらこれでも実現できた
<body>
<script>document.body.replaceWith(document.createElement("body"))</script>
<div>a</div>
</body>
body を最初に入れ替えてしまう
HTML パーサが追加するのは document とはつながっていない古い方の body
これで 「a」 は表示されない
代替コンテンツは新しい body に JavaScript で追加する
CSS の方法と違って body の中がスッキリするのが嬉しいところ
