iPhoneやiPadのSafariでボタンがタップできない（window.openが効かない）時の対処法
iPhoneやiPadでボタンがタップできない時はポップアップブロックを確認する
Webサイト制作をしていると、iPhoneやiPadでボタンがタップできないという現象に直面することがあります。
多くの場合、その原因はブラウザのSafariのポップアップブロックの設定がオンになっていることです。
例えばiPhoneでは、[設定]から[Safari]を選択すると、様々な設定項目の中に[ポップアップブロック]があります。
この項目がオンになっていると、新しいウィンドウを開いてページを表示させるポップアップがブロックされるため、ボタンの種類によっては何も反応しないように見えます。
このポップアップは、もともと悪質なポップアップ広告をブロックするための機能ですが、不正の目的で作ったわけではないWebサイトでもJavaScript（以下JS）のwindow.open()のメソッドで作られたリンクが無効化されてしまうことがあります。
今回はポップアップブロックでwindow.open()が無効化された時の対処法を紹介していきます。
window.open()がブロックされた時の対処法
ポップアップブロックによってwindow.open()がブロックされてしまった時、以下のような対処法があります。
- location.href()を使う
- clickイベントを使う
ここからはこれらの方法を詳しく解説していきます。
location.href()を使う
window.open()でリンクが開かない場合、最も効果的な方法がlocation.href()を使用することです。
つまり、「window.open(“XXX.co.jp")」で処理していた部分を、「location.href(“XXX.co.jp")」に置き換えることでポップアップブロックに引っかからずに済むようになります。
JSの処理によってページ遷移を行いたいというだけであれば、location.href()を使うだけで十分でしょう。
しかし、window.open()が外部リンクや新規のウインドウでページ遷移するのに対し、location.href()では同一タブ内でのページ遷移しか行えません。
そのため、外部リンクや新規ウインドウでページを開きたい場合は、これ以外の方法をとるしかありません。
clickイベントを使う
window.open()を使ったリンクであっても、ポップアップブロックに引っかからないことがあります。
その多くは、clickイベントを使ってwindow.open()を起動させた場合です。
一方で、例えばloadイベントなどでページが読み込まれたタイミングでwindow.open()が処理される場合は、悪質なポップアップとみなされてブロックされることが多いです。
clickイベントとの違いは、ユーザーが意図してリンクをタップしているか否かです。
clickイベントであれば、ユーザーが意図してリンクをタップしていると判断され、ポップアップブロックを潜り抜けることができます。
しかし、loadイベントではユーザーの意思とは無関係であるため、ポップアップが無効化されることがよくあります。
ポップアップブロックを完全にコントロールすることは不可能
今回はポップアップブロックが機能しているブラウザでリンクがタップできなかった場合の対処法を紹介してきました。
しかし、今回紹介した方法でも、JSの内容によってはポップアップブロックによってリンクが無効化されることもあります。
このポップアップブロックがどのような仕様なのかは公開されていないため、完全に処理をコントロールし、ブロックされないようにするというのは不可能です。
現在ポップアップブロックをデフォルトでオンにしているブラウザは増えてきているため、window.open()を使うようなリンクはできるだけ避け、もし使う必要があっても、clickイベントを使うなど、ユーザーの意思で遷移していることが分かるようなコーディングを心がけましょう。