JavaScriptの「alert」や「confirm」がブラウザ上で表示されない場合の対処法と原因について記載します。
具体的にはJavaScriptの以下の構文をブラウザで呼び出した時に、ブラウザ上にダイヤログが表示されない事象について記載していきます。
alertの構文
alert("ブラウザ上で表示するメッセージ");
confirmの構文
confirm("確認ダイヤログ");
では、「alert」や「confirm」が表示されない原因を記載していきます。
原因
同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示すると、ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れます。
このチェックボックスにチェックを入れると以降、ダイヤログが表示されなくなります。
「IE」「Edge」「Chrome」など主要なブラウザで発生します。「Chrome」はバージョンによってチェックボックスが表示されず、ダイヤログが表示されなくなる事象が発生しないケースもあるようです。
上記に当てはまらない場合、構文の書き間違い(スペルミス)という凡ミスもありますので、注意しましょ!
①同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示
②ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れる
③チェックボックスにチェックを入れると、以降、ダイヤログが表示されなくなる
※「IE」「Edge」「Chrome」など主要なブラウザで発生
原因がわかったので、次に対処方法について記載していきます。
対処方法
すぐにできる対処方法としてはブラウザの再起動。これだけでダイヤログが表示されるようになります。取り急ぎのその場をしのぐ対応としては有効。
根本対策としては「alert」や「confirm」を使用しないサイト構成とするのが有効です。
代わりにモーダル表示を使うと良いです。
モーダル表示は、JavaScriptライブラリを使うと簡単にできます。
有名なJavaScriptライブラリを2つあげておきますー
①JavaScriptライブラリ:jquery
②JavaScriptライブラリ:Micromodal.js
alertやconfirmは画面操作を奪ってしまう(アラート、コンファームを操作しないと別ページにうつれない)ので、同一ドメイン内で複数回使うと攻撃とみなされるのでしょうね。
すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能
「alert」や「confirm」が表示されない現象が発生するブラウザ
Windows ブラウザ(IEやEdge)やChromeなど主要なブラウザで発生するようです。
バージョンによっては発生しないケースもあるようです。
また、他のブラウザは未確認ですが、発生する可能性はありそう!
Chromeについては最新バージョンの場合は発生しないようですので、Chromeのバージョンアップをするという応急処置もあります。
まとめ
原因と対処方法をまとめると以下のようになります!
①同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示
②ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れる
③チェックボックスにチェックを入れると、以降、ダイヤログが表示されなくなる
※「IE」「Edge」「Chrome」など主要なブラウザで発生
<対処方法>
すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能