質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

12817閲覧

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

fo_beg

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2016/10/18 07:01

###実現したいこと
今回実装したい機能は、よく他サイトで使用されている【離脱防止ダイアログ】の、警告表示部分を
ダイアログボックス+文章のみではなく、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を表示させる

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

投稿2016/10/18 08:14

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fo_beg

2016/10/24 08:48

ご回答頂き、ありがとうございます。 また、ご返答遅くなり大変申し訳ございませんでした。 セキュリティ上、jsで制御できないものもあるということでとても参考になりました。 非常に丁寧にご説明いただき誠にありがとうございました。 これにて質問の方、閉じさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問