はじめに
PHPでフォームのバリデーションを実装している際、JavaScriptのalertでバリデーションメッセージを表示しようとしました。しかし、alertがページの読み込み完了前に実行されてしまい、背景が真っ黒になる問題に直面しました。この記事では、この問題の原因と、window.onloadを用いて解決した方法について解説します。
問題の背景
フォーム送信後、PHP側でエラーが検出された場合、エラーメッセージをJavaScriptのalertで表示するために以下のようなコードを用意していました。
<head>
<!--（省略）-->
</head>
<?php
// （省略）
// jsにエラーメッセージを渡すようにエンコード
$errorsJson = json_encode($errors, JSON_UNESCAPED_UNICODE);
?>
<script>
let errors = <?php echo $errorsJson; ?>;
if (Object.keys(errors).length > 0) {
let errorMessages = "";
for (let key in errors) {
errorMessages += errors[key] + "\n";
}
alert(errorMessages);
}
</script>
<body>
<!--（省略）-->
</body>
なぜページ読み込み前にalertが実行されるのか
基本的にプログラムは上から順番に実行されるため、このプログラムでは、php → javascript → htmlの順番で実行されています。そのため、bodyタグ内の要素などがまだ読み込まれていない状況でalertが発動するため、不自然な挙動となってしまいます。
window.onloadでの解決方法
今回はこの問題の解決策として、window.onload を使用しました。window.onload はページ内の全てのリソース（画像、CSS、スクリプト等）が完全に読み込まれた後に実行されるため、alertの実行タイミングを適切に調整することができます。
修正後のコードは以下のようになります。
<head>
<!--（省略）-->
</head>
<?php
//
$errorsJson = json_encode($errors, JSON_UNESCAPED_UNICODE);
?>
<script>
// ページの読み込み完了後にalertを実行する
window.onload = function() {
let errors = <?php echo $errorsJson; ?>;
if (Object.keys(errors).length > 0) {
let errorMessages = "";
for (let key in errors) {
errorMessages += errors[key] + "\n";
}
alert(errorMessages);
}
}
</script>
<body>
<!--（省略）-->
</body>
まとめ
今回のケースでは、ページ読み込み前にalertが実行されるというタイミングの問題が発生しました。しかし、window.onloadを使用することでリソースの読み込み完了を待ってからalertを表示することで、問題を解決することができました。