フォームページやカートページの離脱防止対策として、オリジナルのモーダルウィンドウを表示させる方法（beforeunload以外）

Question

あるWEBページを閲覧中
（例えば、
https://employment.en-japan.com/signup/ のようなフォームページ）から、
離脱しようとした時に、

jQuery(window).on("beforeunload", function(){
  return "適当な表示させたい文字列";
});

で作成されたブラウザ固有のalerｔは、よく見かけるのですが、
参考：http://blog.yuhiisk.com/archive/2016/02/02/alert-with-onbeforeunload.html

【質問】「beforeunload」以外で同じようなことは可能でしょうか？

今見ているページから離脱する方法として、
・ブラウザバック
・タブを閉じる（ctrl+W）
・ブラウザを閉じる（ctrl+Q）
・ブックマークなどURLを直接書き換える
といったような行動が予想できると思いますが、
これらの行動（event）で発火できるような js 書き方があれば、教えてほしいです。

よろしくお願いします。

▼自分で調べたもの
１）
http://colors.carlsednaoui.com/
└カーソルがwindowから外れた時に発火するイメージ
※ 理想の形ではないので、使用断念

pushStateを使って、擬似的にページ遷移させてhashchangeイベントで やろうと思っても、
履歴が変な感じになってしまうので、開発中断中

Comments

[think49]

beforeunload では期待通りに動作しない理由を開示した方が良いと思います。そうでなければ、別の方法を提案してもご希望に添えない可能性があります。

[KosukeKato]

beforeunload だと、Chromeの場合、
https://i.gyazo.com/bcb863e3ccd02e949153640b5a478c05.png
（↑gyazoのため、しばらくしたら見れなくなるかも。。。）
上の画像のように、
・Chromeのアイコンが出る
・「このページでこれ以上ダイアログボックスを生成しない」
など、意図しないものが出現するのでこれらを表示しないやつを作ってみたいんです。

たとえば、
http://colors.carlsednaoui.com/
のモーダルのようなものとかを 、beforeunload のタイミングで表示できたらいいなと思っています。

Answer 1

・ アクセシビリティ的に基本的にユーザーは好きなときにページを離脱できることが好ましい。
・ シンプルな処理フローがあるのならば、それを採用すべき

みなさまの仰るとおりです。。。 orz

ということは、beforeunload
に替わる選択肢は、今のところ無いようですね。
考えなおしてみます。

みなさま、ご回答ありがとうございました。m(__)m

Answer 2

もし、ブラウザを閉じようとしたタイミングで独自のモーダルダイアログを出せる。なんてことが出来ると、専用アプリでも無いブラウザが利用者の意図で閉じられなくなるわけで、それって、とっても迷惑な話になりませんか？これができれば悪質な広告もその機能が利用できてしまいますので、今できる方法があったとしても、今後できなくなるのがオチだと思います。

そもそも、それが出来たとしても、途中のネットワークが落ちる、ブラウザがクラッシュする、クライアントの電源が切れる。といった状況が起こるとサーバ側でどのように備えていても、そのイベントは捉えられませんので、このような状況を考えなくても済むシンプルな処理フローがあるのならば、それを採用すべきですし、それができなければ、今回のような状況が起こることを前提として運用も含めたシステム設計をすべきでしょう。

悩まれている問題は利便性やら色々考えた結果なのだと想像するのですが、ブラウザを使う限り挑むべき問題ではないと思います。使えるシステムにするためには割り切りも必要なのではないでしょうか？

Answer 3

unload はいかがでしょうか。

• 1.6.5 HTMLイベント型 - Document Object Model Events

Re: KosukeKato さん

Comments

[KosukeKato]

ご回答ありがとうございます。
unload、、そんなのがあったんですね！

でも、うーん、思ったように動かないです。。。
http://semooh.jp/jquery/api/events/unload/fn/　の
"実行結果を単体で表示"のページを普通に閉じれました。

[..iilllii..]

unloadなんてなんもできないんじゃないの？
https://developer.mozilla.org/en-US/docs/Web/Events/unloadによると
・nothing is visible anymore to the end user
・UI interactions are ineffective (window.open, alert, confirm etc.)
だぞ。基本的にユーザーは好きなときにページを離脱できなければいけない。それを阻害することはいけないことだと思います！

[think49]

他の方の仰るようにユーザから離脱させる選択肢を奪う事が目的なら無理だと思います。
Webアクセシビリティの理念上、ブラウザの動作をコントロールする権限はユーザにあるのでWeb制作側でコントロールする事は出来ません。
unload と confirm を組み合わせてユーザに「離脱するor離脱しない」の選択肢を与えるのが妥協案となるのではないでしょうか。
この動作も好まない方は大勢いらっしゃるとは思いますし、私も好きな方ではありませんが、私から提案できるのはそのぐらいです。
ちなみに、teratailの回答欄に本文を入力して [更新] ボタンを押すと似たようなダイアログが出てきますね。