beforeunloadで、ページ離脱時に出てくるブラウザのダイアログを非表示にしたい

Question

現在、サイト離脱時にバナーを表示したく、jQueryで下記のようなコードを組んでいます。

jQuery(function($){
	var flg = false;
	var scrollTop;

	$(document).on('click', 'a', function(){
		flg = true;
	});

	// ページ離脱時にバナーを表示
	$(window).on("beforeunload", function(e){

		// flgがtrueのときは、サイト内にあるリンクなので何もしない
		if( flg === true ) {
			flg = false;// flgをfalseに戻しておく
		} else {
			var $this = $('.leave-bnr-area');
			var width = $(window).width();
			var high = $(window).height();

			$this.css('min-height', high + 'px');

			scrollTop = $(window).scrollTop();// モーダルが開いたときのポジションを記録
			$('.leave-bnr-area .leave-bnr-wrap a').css({
				'top' : ( high - 250 ) / 2,
				'left' : ( width - 300 ) / 2,
			});
			$this.addClass('lb-open');
			$this.animate({opacity: 'show'});
			$('body').addClass('noscroll').css('top', -scrollTop);// スクロールを固定

			e.preventDefault();

			return false;
		}
	});

	// モーダルの背景をクリックしたら、モーダルを閉じる
	$('.leave-bnr-bg').on('click touchstart', function() {
		$('.leave-bnr-area').removeClass('lb-open');
		$('.leave-bnr-area').animate({opacity: 'hide'});
		$('body').removeClass('noscroll').css({ 'top' : 0 });// 現在のスクロール位置から、0に戻す
		window.scrollTo( 0, scrollTop );// モーダルを閉じたときに記録した場所までスクロールする
	});
});

<div class="leave-bnr-area">
	<div class="leave-bnr-bg"></div>

	<div class="leave-bnr-wrap">
		<a href="#"><img src="./js/banner.png"></a>
	</div>
</div>

body.noscroll {
  overflow: hidden;
  position: fixed !important;
  width: 100%;
}
.leave-bnr-area {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.leave-bnr-area.lb-open {
  display: block;
}
.leave-bnr-area .leave-bnr-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
.leave-bnr-area .leave-bnr-wrap {
  text-align: center;
  position: relative;
}
.leave-bnr-area .leave-bnr-wrap a {
  position: fixed;
  margin: auto;
  display: inline-block;
}

これで、サイト離脱時にモーダルウインドウでバナーが表示されるようになりました。
ですが、バナーが表示される前に、Chromeでは「このサイトを離れてもよろしいですか？」というダイアログを表示されてしまいます。

こちらを非表示に（スキップ）して、バナーを表示させたいのですが、ブラウザの挙動のようなので、そもそもそれが可能なのかどうかもわからず…
もし可能なのでしたら、その方法もご教示いただけますと幸いです。

よろしくお願いいたします。

Answer 1

自己解決しました。
色々調べてみましたが、やはりbeforeunloadでのダイアログ削除は不可能なようです。

なので、そもそもの仕様確認と、コードの見直しをしました。
仕様としては離脱時にバナーを表示する、というもので、サイト内遷移や、外部リンククリック時はバナー表示をさせなくてもよいということでしたので、beforeunloadを使わない方法があると気付きました。

サイト内遷移や外部リンククリック以外の離脱ということは、お気に入りや、ホームボタンなど、ブラウザバーにマウスカーソルが移動したとき、つまりbody要素からマウスアウトした場合にのみ表示させればOKでした。

そして、何度もバナーが表示されるのは、ただただ鬱陶しいだけなので、一度だけ表示させるように変更しました。
以下、コードです。

jQuery(function($){
	var flg = false;
	var scrollTop;

	$(document).on('click', 'a', function(){
		flg = true;
	});

	// ページ離脱時にバナーを表示
	$('body').one('mouseleave', function(e){// ←変更した箇所（ここだけです）

		// flgがtrueのときは、サイト内にあるリンクなので何もしない
		if( flg === true ) {
			flg = false;// flgをfalseに戻しておく
		} else {
			var $this = $('.leave-bnr-area');
			var width = $(window).width();
			var high = $(window).height();

			$this.css('min-height', high + 'px');

			scrollTop = $(window).scrollTop();// モーダルが開いたときのポジションを記録
			$('.leave-bnr-area .leave-bnr-wrap a').css({
				'top' : ( high - 250 ) / 2,
				'left' : ( width - 300 ) / 2,
			});
			$this.addClass('lb-open');
			$this.animate({opacity: 'show'});
			$('body').addClass('noscroll').css('top', -scrollTop);// スクロールを固定
		}
	});

	// モーダルの背景をクリックしたら、モーダルを閉じる
	$('.leave-bnr-bg').on('click touchstart', function() {
		$('.leave-bnr-area').removeClass('lb-open');
		$('.leave-bnr-area').animate({opacity: 'hide'});
		$('body').removeClass('noscroll').css({ 'top' : 0 });// 現在のスクロール位置から、0に戻す
		window.scrollTo( 0, scrollTop );// モーダルを閉じたときに記録した場所までスクロールする
	});
});

mouseoutだと子要素を判別できず、常にバナーが表示されてしまうため、mouseleaveを使って解決しました。
ありがとうございました。

Answer 2

私も過去に同じようにブラウザの出すダイアログを消したいとの要件があり色々と調べましたが、これについては制御のしようが無かったと記憶しています。

何かしらやり方があるのか、気になりますね。

Comments

[suminoel]

ご回答ありがとうございます。
仰る通り、beforeunloadでのダイアログ削除はできないみたいですね。
別の方法で解決しましたので、自己解決方法をご参照いただければと思います。
ありがとうございました。