sk51.log

The Averageman's web log.

iOS 8.1で、window.onloadが動かない原因


2014年11月2日 Web制作 ,

iOS 8.1において、javascriptのwindow.onloadが動作しないというバグがありました。
window.onloadは、DOM構築後に実行したい関数を呼び出すときに使用するイベントハンドラです。
これが発火しないと多くのコードが実行できない可能性がでてきますので、バグとしてはやっかいなものです。

1. window.onloadが動作しない原因

iOS 8.1window.onloadが動作しない原因は、
HTML5の<audio>・<video>タグのpreload属性の値が”none”の場合に起こります。

<script>
window.onload=function(){
 alert();
 };
</script>
<video src="test.mp4" preload="none" controls="controls" width="300" height="150"></video>
<audio src="test.mp4" preload="none" controls="controls"></audio>

上記のように、 <audio>・<video>タグのpreload属性の値が”none”の場合は、いくら待ってもalert()が実行されません。

また、jQueryでも同様に発火しません。

<script>
$(function(){
  alert();
});
</script>

こちらもです。

<script>
$(window).on('load', function(e){
  alert();
  });
</script>

代替のこちらも。

<script>
$(window).load(function(e){
  alert();
});
</script>

2. 発火するタイミング

しかし、発火しないわけではありません。
preload=”none”のとき、window.onloadが発火するタイミングは、srcのファイルを読み込めば発火します。
なので、再生ボタンをタップしたときに、window.onloadが実行されるようになります。

3. 解決策

<audio>・<video>タグのpreload属性を”auto”もしくは、”metadata”にする。
いまのところ、これしか解決策がないような気がします。

video 要素 – HTML | MDN  – https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
によると、preload属性がない場合は、ブラウザが値を定義するようになっているようです。

この属性を設定しない場合の既定値はブラウザが定義します (つまり、ブラウザが自身の既定値を選択できます) が、仕様書ではmetadataに設定するであろうと助言しています。

video 要素 – HTML | MDN

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

どうしても、window.onloadを使いたい場合で、負荷を抑えたい場合は、”metadata”を指定するしか解決できないようです。
もちろん、Appleが対応するはずですから、それを待つしかありません。

4. 補足

この問題は、私の手持ちの環境ですと、

  • iOS 6.1.4 / iPhone5 => 発火

  • iOS 7.1.1 / iPhone4 => 発火

  • iOS 8.1 / iPhone6 plus => 不発

という結果になりました。

iOS 8.1もしくはiOS 8.xのバグのようです。
Androidに関しては実機が無いため、動作未確認です。

One thought on “iOS 8.1で、window.onloadが動かない原因”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*

CAPTCHA