ページを閉じると発生するポップアップイベントの実装について

Question

前提・実現したいこと

ページ離脱イベントの実装を目標にしています。
下記のコードでポップアップが表示されたり,されなかったりという問題が発生しています。
具体的には下記を参照ください。

発生している問題

・ ファーストビューで即ページを閉じた場合、イベントが機能せずポップアップが表示されません。
・ 一番下までスクロールしてページを閉じようとした場合、初めてポップアップが表示されます。

該当のソースコード

$(function() {
	// ★ページ離脱ポップアップ広告
	$(window).on('beforeunload', function() {
		//window上でページを閉じると.opが表示される
		$(".op").show();
		return ('ページ移動を確認します');
	});
}); 

<div align="center">
   <div class="op" style="display: none;">		
     　<span class="close">×</span>
     　<p>ポップアップ表示内容</p> 
   </div> 
</div>

Comments

[vapordog]

$(function　はページがロードされ終わるまで始まらな無いので、ロード完了までbeforeunload イベントへの登録が行われません。試しに$(function(){})の中ではなく、外に$(window).on($before...を書いてみてはどうでしょうか。可能性の一つであることと、外でもちゃんと実行されるか確認していないので、こっちにかいてしまいました

[ryu01212008]

試しに$(function(){})の中ではなく、外に$(window).on($before...を書いてみたのですが、今までと変わりませんでした・・・。

Answer 1

• window.onbeforeunload

このイベントが windowのリソースがまさにunloadする時、実行します。この時まだdocument(Webページ)はそのまま見えて残っている状態で、イベントがキャンセル可能な状態です。

即閉じで実行されないのは画面がロード中でイベントがキャンセルされたためです。
要は、仕様ですね。

beforeunloadはform送信時も発生したり、
あまり使い勝手が良いとは言えないので、要件に合わせてやり方を考えた方がいいかもしれません。

• onbeforeunload が変わってた
• ページを閉じる時に確認メッセージを表示する（beforeunload）

Comments

[ryu01212008]

mts10806さん

回答ありがとうございます。
実は、ポップアップの中にはメルマガの登録を促すformを設置したいと考えています。
参考サイトを拝見させていただきましたが、
$("input[type=submit]").on('click', function(){
$(window).off('beforeunload');
これで制御できることはわかったのですが、window.onbeforeunloadの使用では希望を満たさないので、
他にページを閉じるときにポップアップを表示できるようなJavaScriptはありますでしょうか？

[m.ts10806]

うーん。
onbeforeunloadを使う場合でもできないことはないですけどね。
メインコンテンツを非表示にしておいてwindow.loadのタイミングで「表示」に切り替えておけば、余程HTML総量がよほど大きいページでない限りはユーザーは待てると思いますし。

「ページを閉じる」という操作自体がユーザー心理的な観点からするとあまり深追いされたくないと思うので、別の導線を考えた方が良いかもとは思います。

[x_x]

この場合、引用するのは「Note」の部分じゃないですかね？
ただそれも日本語版は何言ってるかわからないので英語版を見たほうがよさそうです。

[m.ts10806]

確かに。かなり直訳っぽい感じですね。

[m.ts10806]

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all. For a list of specific browsers, see the Browser_compatibility section.

Google翻訳＝
注意：不要なポップアップに対抗するために、一部のブラウザでは、ページが操作されていない限り、beforeunloadイベントハンドラで作成されたプロンプトは表示されません。いくつかはそれらをまったく表示しません。特定のブラウザーの一覧については、「Browser_compatibility」セクションを参照してください。

こっちの方が日本語としては分かりやすいですね。MDN日本語どうなってんだ・・・

[ryu01212008]

回答ありがとうございます。
ひとまずは、windowの外にマウスを移動したときにポップアップを表示するようにしました。
＝離脱以外の行動も含みますが、ページを離れようとするユーザー全てに行動してしまいますので理想ではないですが、応急用として。
ただ、パソコンではマウスの動きで発火しますが、スマホユーザーに対して対応できないことが課題として今後も探していきたいと思います。