質問: ### 実現したいこと 今回実装したい機能は、よく他サイトで使用されている【離脱防止ダイアログ】の、警告表示部分を ダイアログボックス+文章のみではなく、HTMLが有効な小Window(モーダルウィンドウ)でバナー画像を表示したいと考えております。 この機能の実行タイミングは ・ブラウザの戻る、閉じる、進む、更新ボタンを押したとき ・URL欄の直接編集後のEnter ・表示されたブラウザ内のAタグのリンク押下 の時に検知されて、モーダルウィンドウで開く小画面上にバナーを表示したいです。 ### 今まで出来た事 戻るボタンのみとなりますが、押下検知+モーダルWindowの表示までは こちらのjsで実装できました。=1 参考にしたサイト http://dotnsf.blog.jp/archives/1012215593.html ``` $(function(){ if( window.history && window.history.pushState ){ history.pushState( "nohb", null, "" ); $(window).on( "popstate", function(event){ if( !event.originalEvent.state ){ // バナー表示処理 } }); } }); ``` ### 出来ないこと 上記の内容で、「戻るボタン押下」での検知・動作は出来ましたが その他の離脱条件である ・進むボタン、更新ボタン、閉じるボタン ・URL欄の直接編集後のEnter ・表示されたブラウザ内のAタグのリンク押下 の検知が出来ず、モーダルWindowが表示出来ません。 その他各種サイトを調べた結果、 beforeunloadイベントが最も近かったのですが、 どうしても通常のダイアログBOXが表示されて、 かつ、その選択肢が「いいえ」だった時のみ モーダルWindowが表示される形になってしまいます。 その時のサンプルが以下です。=2 ``` $(document).ready(function(){ $(window).on("beforeunload", function (e) { // バナー表示処理 return false; }); }); ``` ### 今回質問したいこと ・1の状態で、検知範囲を広げる方法 又は ・2の状態で、デフォルトのダイアログを出さない かつ、その後に表示するモーダルWindowを表示させる ということは可能かどうか。可能だとした場合、どうすればよいか。 お知恵を借りたく、質問をさせて頂きます。 よろしくお願い申し上げます。
回答: 通常のWebページ実装では、ブラウザクローズやアドレスバー経由の遷移に対応する方法は`onbeforeunload`しか存在しませんし、できることも確認のメッセージを出すことだけです。 おまけに、少し前まで`beforeunload`では任意のメッセージを出せましたが、最近のChromeでは定形のメッセージのみとなっています。 このようになっているのは、ひとえに**不適切なJavaScript**の存在によります。Chromeがこうなる前に見た例ですが、ポップアップした偽のセキュリティ広告を閉じようとしたところ、「システムが危険です。それでも閉じてしまいますか?」みたいなメッセージを`onbeforeunload`で表示させる、ということがありました。 仮に、本当に閉じる前にJavaScriptで処理ができるとしたら、閉じる前の処理で「閉じない」とするだけで**閉じられないウィンドウ**が出来上がってしまいます。セキュリティ上、Webページ上のJavaScriptで可能なことには限界があります。