離脱防止警告をモーダルWindowで出したい

###実現したいこと
今回実装したい機能は、よく他サイトで使用されている【離脱防止ダイアログ】の、警告表示部分を
ダイアログボックス＋文章のみではなく、HTMLが有効な小Window（モーダルウィンドウ）でバナー画像を表示したいと考えております。

この機能の実行タイミングは
・ブラウザの戻る、閉じる、進む、更新ボタンを押したとき
・URL欄の直接編集後のEnter
・表示されたブラウザ内のAタグのリンク押下
の時に検知されて、モーダルウィンドウで開く小画面上にバナーを表示したいです。

###今まで出来た事

戻るボタンのみとなりますが、押下検知＋モーダルWindowの表示までは
こちらのjsで実装できました。＝①

参考にしたサイト
http://dotnsf.blog.jp/archives/1012215593.html

javascript
1$(function(){
2    if( window.history && window.history.pushState ){
3        history.pushState( "nohb", null, "" );
4        $(window).on( "popstate", function(event){
5            if( !event.originalEvent.state ){
6                // バナー表示処理
7            }
8        });
9    }
10});

###出来ないこと
上記の内容で、「戻るボタン押下」での検知・動作は出来ましたが
その他の離脱条件である
・進むボタン、更新ボタン、閉じるボタン
・URL欄の直接編集後のEnter
・表示されたブラウザ内のAタグのリンク押下
の検知が出来ず、モーダルWindowが表示出来ません。

その他各種サイトを調べた結果、
beforeunloadイベントが最も近かったのですが、
どうしても通常のダイアログBOXが表示されて、
かつ、その選択肢が「いいえ」だった時のみ
モーダルWindowが表示される形になってしまいます。

その時のサンプルが以下です。＝②

javascript
1$(document).ready(function(){
2    $(window).on("beforeunload", function (e) {
3    // バナー表示処理
4    return false;
5    });
6});

###今回質問したいこと
・①の状態で、検知範囲を広げる方法

又は

・②の状態で、デフォルトのダイアログを出さない
かつ、その後に表示するモーダルWindowを表示させる

ということは可能かどうか。可能だとした場合、どうすればよいか。

お知恵を借りたく、質問をさせて頂きます。
よろしくお願い申し上げます。

行動規範の内容に同意します

回答1件

ベストアンサー

通常のWebページ実装では、ブラウザクローズやアドレスバー経由の遷移に対応する方法はonbeforeunloadしか存在しませんし、できることも確認のメッセージを出すことだけです。

おまけに、少し前までbeforeunloadでは任意のメッセージを出せましたが、最近のChromeでは定形のメッセージのみとなっています。

このようになっているのは、ひとえに不適切なJavaScriptの存在によります。Chromeがこうなる前に見た例ですが、ポップアップした偽のセキュリティ広告を閉じようとしたところ、「システムが危険です。それでも閉じてしまいますか？」みたいなメッセージをonbeforeunloadで表示させる、ということがありました。

仮に、本当に閉じる前にJavaScriptで処理ができるとしたら、閉じる前の処理で「閉じない」とするだけで閉じられないウィンドウが出来上がってしまいます。セキュリティ上、Webページ上のJavaScriptで可能なことには限界があります。

投稿2016/10/18 08:14