ブラウザのポップアップブロック機能が有効に設定されている場合、ページロード時や非同期通信後のような、 ユーザー操作に直接関係ない時において子ウィンドウを開こうと (window.open()) しても開けない。
ポップアップブロック機能がデフォルトでONになっている。 しかも、ブロックされたことが通知されないため、ユーザーが問題に気付けない。
ブラウザの設定変更によるブロックOFFは可能だが、その場合、 全体への一律の適用であって個別に設定はできないため、他サイトの閲覧にも影響を与えてしまう。 また、OFFにしても「このサイトではポップアップウィンドウが開きます」アラートが毎回出るため不便。
ポップアップブロック機能がデフォルトでONになっている。 Safariと違いブロックされた旨の通知がされるのでユーザーは気付ける。
また、ブラウザの設定変更によるブロックOFFがサイト単位で個別にできるため、 他サイトのブロックはONのままで、当該サイトだけのOFFができる。
ボタンクリック等のユーザーの操作に連動する時であればブロックはされないため、 ボタンのクリック等をしたタイミングで、空ページを指定した window.open() を事前にしておき、 その後のページロード時や非同期通信終了時にそのウィンドウに対して実ページを window.open() する。 →サンプル (index.html) 参照。
メインページ内に iframe タグを差込み、そこにポップアップページをロードする。
iframe 内は独立したウィンドウの扱いになるため、既存のポップアップページの実装をそのまま使用できる。 ポップアップからの親ウィンドウへのアクセスも window.opener が使える。
メインページ内の div タグに予めポップアップ要素を設定しておき、css の display プロパティで表示を切り替える。 既存実装をそのまま流用することはできず、大幅な変更が必要になる。
案3の変形。メインページ内 div タグのポップアップ要素は、Ajax で動的にロードする。