ポップアップブロックの回避策を考える

今やポップアップブロックは各ブラウザの標準機能として当たり前のものになっています。

ただ、開発していると、非同期通信後にポップアップで画面表示をさせたい、というケースはあります。
これはそのままやってしまうと、ポップアップブロックに引っかかってしまいます。

fireEvent/createEventなどを活用して、ユーザー操作(マウスクリック)を擬似再現することで、ブロックを防ぐやり方もあるようですが、主要ブラウザすべてに対応できるわけではなく、またいつブロック対象になってもおかしくない、微妙な対応になっていると思います。

そこで考えたのが、予めポップアップウィンドウを立ち上げておき、
非同期通信処理後にそのポップアップウィンドウに対してコンテンツを読み込ませる、というもの。

「現在表示準備中です」などのメッセージをのせたダミーページを、ユーザー操作と同時に立ち上げておきます。

window.open('/dummy_page.html, 'popup1', 'width=100,height=100,resizable=yes,scrollbars=yes');

非同期処理後に、同じポップアップウィンドウで、コンテンツを読み込ませます。
エラーの場合は、エラーと対応についてのページを読みこませれば、ユーザーストレスもないと考えます。

window.open('/content.html, 'popup1', 'width=100,height=100,resizable=yes,scrollbars=yes');

IE、FireFox、Chromeについて期待通りの動作をしました。
念のため、第2引数のwindow nameに-(ハイフン)を含んだ単語を使うと、IE8では引数エラーとなったので注意です。

この方式で対処できないケースもあるとは思いますが、もし同じような問題でお困りの方がいれば、一つの対策として試してみることをおすすめします。