ページ遷移時に「ポップアップがブロックされました」と警告が出てしまい進まなかった時の対応

状況

jQuery非同期処理結果を待ってからページ遷移処理
window.open()を使用してページ遷移
Google Chromeで別タブで表示したい

対応

1)クライアント側で設定を許可してもらう

サイトごとにブロックするか許可するかが設定できるので、可能であればこれが早い

Chrome でポップアップをブロックまたは許可する

2)疑似ページを表示して処理待ち後に正式なページを表示

1)だとそも不審なアプリだと思われそうだったので、今回はこちらの方法を選択。

window.openが全てブロックされているわけではなく、onClickなどユーザー操作後であれば普通に開くため、処理待ち中は一旦偽ページを開いて遷移することにした。

$("#save_button").on("click", function (e){
	e.preventDefault();
	const error_page = "https://mydomain/error.html";
	const success_page = "https://mydomain/success.html";
	let blank_window = window.open('', '_blank');
        blank_window.document.title="Loading|myGame"
        blank_window.document.body.innerHTML='<h1>セーブ中です...</h1>';
	$.when(save()).done(function (data) {
	  if (data["result"]) {
	    blank_window.location.href=success_page;
	  }else{
	    blank_window.location.href=error_page;
	  }
	}).fail(function(data){
	    blank_window.location.href=error_page;
	});
});

クリックイベント後ならポップアップはブロックされないので空のページを開いておく

window.open('', '_blank');

処理待ちの間、真っさらなウインドウがユーザーに表示されてしまうのでtitleタグやページコンテンツを仮入力してそれっぽく。

blank_window.document.title="Loading|myGame"
blank_window.document.body.innerHTML='<h1>セーブ中です...</h1>';

処理が終わったら空のwindowに遷移先URLを指定してあげることで、別タブでページを開いた様になる👏

blank_window.location.href=success_page;

💡 エラー時に偽ページを閉じたい時は

blank_window.close();

で閉じてあげると自然。(元ページにalert()出るようにしていると閉じてくれないので注意)

3)Ajaxならasync:falseでも

$.ajax({
  url: url,
  type: "POST",
  data: post_data,
  async:false
})

asyncオプションにfalse指定してあげると同期処理になるので、ポップアップもブロックされなかった。