10th
非同期処理を挟むと発動するポップアップブロックへの対処方法
各ブラウザのポップアップブロック機能は普通ユーザーが起こしたイベントに対しては発動しないように作られていますが、例えば要素がクリックされると非同期でリンク先を取得してページを開くような場合、Operaを除く主要ブラウザでポップアップブロックが発動します。実際どうなるかクリックするとURLをbit.lyして別ウィンドウで開くサンプルを書いて試してみました。ちなみにわざわざ非同期でリクエストするのは負荷軽減のためです。
#0は最初からURLが分かっている場合です。非同期ではないので各ブラウザ、直接開いたと認識して問題なく動きます。参考用で今回のテストとは関係ないです。
#1はbit.lyへのJSONPリクエストを挟みました。結果を取得後にwindow.openしています。ブラウザでポップアップを許可していない場合、
- IEとFirefoxはポップアップブロックが働き警告が出る
- SafariとChromeはポップアップブロックが働き警告も出ない
- Operaはユーザーからのクリックとして扱い、#0と同じように普通に開く
Operaかっこいい！ WebKit系ブラウザは開発者側からすると動いていないように見えて困ります。
#2ではリクエスト後にa要素を作成、リンクの置き換えを行い、その後createEvent（IEではfireEvent）を使ってクリックイベントをエミュレートしています。Safari、Chrome、Operaで完璧に動きます。一方IEとFirefoxでは上手く行きません
- IEの
a.fireEvent('onclick')はonclickイベントに対して働くため、a要素のクリックを模倣出来ない - Firefoxの
a.dispatchEvent()はa要素に対して効かない
#3に@aerith発案のformからonsubmitで開くパターンを追加しました。結果はwindow.openを使った#1と全く同じでした；；
といった結果になりました。完全に通常リンク扱いにするのは難しそう…。IE、Firefoxでは#1のようにwindow.openを使ってポップアップブロックを解除してもらい、WebKit系ブラウザでは#2のようにイベントを利用するのがよさそうだと思いました。
Operaまじかっこいい！
