JavaScriptのalertやconfirmが表示されない時の対処法

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

jQuery
jQuery: The Write Less, Do More, JavaScript Library

②JavaScriptライブラリ:Micromodal.js

Micromodal - Tiny javascript library for creating accessible modal dialogs
Micromodal enables you to create accessible modal dialogs with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

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など)で簡単に実装可能