2019年12月6日window.openerがiOS版Chromeで使えない問題に対処するには?こんにちは!エンジニアの宇都宮です。普段はジーンコードを利用したスマートフォンサイトの構築を担当しています。Chrome(以下、iOS版Chrome)でポップアップウィンドウがあるサイトを変換する際のTipsをご紹介したいと思います!「ポップアップの住所検索画面で入力した内容が、親画面に反映されない!iOSのChromeだけ!」といった問題に遭遇したことはないでしょうか?これは子ウィンドウで入力したデータをwindow.opener経由で親ウィンドウに渡しているjavacsript処理が正常に動作していないことが原因と考えられます。PCで確認した場合やAndroidでは動作するのに、iOS版Chromeでだけ動作しない場合はwindow.openerが原因の可能性が高いです。まとめiOS版Chromeではwindow.openの戻り値がnull!?iOS版Chromeはウィンドウ関連のjavascriptAPIの挙動がPC版とは異なります。window.openの戻り値がwindowオブジェクトではなくnullになったり、ポップアップで表示したウィンドウでwindow.openerオブジェクトがnullになったりします。実はこのバグはバージョン48のiOS版Chromeで修正されています。バージョン48からはレンダリングを担う機能が「UIWebView」から「WKWebView」に変更された際に、一緒に修正されたようです。古いバージョンのiOS版Chromeではwindow.openerはnullのままです。以下のURLにアクセスすると、以下のキャプチャの様にどちらのWebViewを使用しているか確認できます。https://jsfiddle.net/j4vkwjj2/1/iOS版Chromeではwindow.openerの代わりにwindow.localStorageを使う!window.openerで親子間のウィンドウでデータの受け渡しができない場合、代替手段としてwindow.localStorageが使えます。window.localStorageはブラウザにデータを保存する仕組みです。Javascriptでデータの保存、取得、削除が可能です。実際にサンプルコードを見てみましょう。</script></body></html>親ウィンドウは1秒毎にlocalStorageに子ウィンドウが設定したデータが存在するか監視しています。子ウィンドウが設定したデータが存在する場合はアラートメッセージを表示しています。データが存在しない場合はsetTimeout関数で1秒後にまたlocalStorageを参照するようセットしています。</script></body></html>子ウィンドウではリンクのonclickイベントでlocalStorageにデータをセットし、ウィンドウを閉じています。localStorageのデータは、ブラウザを閉じた後も残り続けるため、画面初期表示時やデータを取り出した後に削除しています。まとめlocalStorageを経由することで、window.openerが使えないブラウザでも親子間のウィンドウで連携する処理を書くことができました。ジーンコードでPCサイトを変換してスマートフォンサイトを構築する場合は、PCサイト側のwindow.openerを使用した処理を、localStorageを利用した処理に差し替えます。iOS版Chromeでポップアップウィンドウが正常に動かない場合は、localStorageを利用した方法を検討されてはいかがでしょうか。シンメトリックでは、スマホサイトを制作するだけでマルチデバイス対応を実現する「スマホのサイト制作。GCモバイルファースト」を提供しています。スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。