window.onloadがipad/iphoneで動かなかった話【javascript】

デザイナーのオッコです。

レスポンシブ対応のため、iPad proでテストを行ったところ、fullCalendarが出るはずの部分がまっさらでカレンダーが表示されていませんでした。iphoneも同様。

jsは以下の書き方をしていました。

<script>
window.onload = (e)=>{
 //fullCalendarの処理
}</script>

ちなみにChromeのエミュレータでは問題なく動作します。

最初はfullCalendarが関係していると思い、オプションなどを色々調べていたのですが、どうも違うということで、js内にalertを書きまくって検証してみました。

windowsで動くjsがiOS端末で動いていない

Chromeで期待通り出たアラートが、iOSでは出ませんでした。

どうやらiOSではwindow.onloadの中身だけ処理をすっ飛ばしているようです。

<script>
alert("ここは出る");

window.onload = (e)=>{
alert("ここは出ない");

 //fullCalendarの処理
}</script>

iOS＋safariでwindow.onloadが動かない問題について

↑こちらの記事をヒントに以下のように書き換えました。

<script>
document.addEventListener('DOMContentLoaded', (e)=> {
  //fullCalendarの処理
});</script>

これでiPad/iPhoneでも問題なくカレンダーが表示されました。

リンクにはsafari限定と書かれていますが、私の場合iPadのChromeでも表示されなかったため、もしかしたら原因は以下だったかもしれません。

エンジニアの階段

window.onloadの利用はお勧めしない その理由 window.onloadを書いたけど、動かないことが多々あります。 これは、同じページ内で複数のwindow.onloadが記述されている場合に、一つしか動作できないのが原因なようです...

いずれにせよ、fullCalendarは悪くなかったです。疑ってすみませんでした。

関連記事紹介

あわせて読みたい

【jquery】iOS用クリックイベント「touchend」で二重にイベントが発火していた件【iPad】 デザイナーのオッコです。 今から、私が悩んだiPadでの挙動についての解決策をお話ししようと思います。 iPadでプルダウンをタップするとすぐ閉じてしまう iPadでヘッダ...

あわせて読みたい

iOSでリンク付きの画像をタップしたときにデフォルトで青くなってしまうのを解消 こんにちは、コーダーのオッコです。 直しちゃったので参考になる画像がないのですが、スマホ実機でリンクがついた画像をタップすると、タップした領域がデフォルトで青...

あわせて読みたい

クリックで開閉するヘッダのプルダウンコード（任意の場所をクリックして閉じられる処理あり） コーダーのオッコです。 ヘッダのプルダウンの挙動ってタグ構造に左右されたりして地味に時間を取られるので、自分なりの書き方をまとめておきます。 ヘッダの右上にプ...

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか？

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら

ITツール紹介ページはこちら