iBooksにおけるwindow.onloadの挙動を調べてみた。

本日風邪でお休み、あったかくして積んでた宿題をひとつやっときます。
内容は、iBooksにおけるイベント発火ポイント、特にwindow.onloadの挙動です。

以前、いくつかJavascriptを組み込んだEPUBを作成したときに気がついたのですが、iBooksはリフローのEPUBを開くときに（おそらく）ページ数を計算するために裏で全HTMLをオープンしており、その際にwindow.onloadが発火しているような気がしました。今回はそれが正しいのか、またフィックス型ではどうなのかを検証してみました。

検証は、windowオブジェクトにあるイベントを捕捉してページ内に動的に挿入するEPUBを作成し、iPhone(iOS 6.0.1)のiBooks(version 3.0.2)で実際に開いて行いました。
ちなみに、手で操作しているとdeviceorientationとdevicemotionが大量に発生してしまうため、この二つは表示しないようにしています。

リフロー型の挙動

EPUBの１ページ目を開いたところ。時間フォーマットは「時間:分:秒:ミリ秒」です。
onload、pageshow、popstateが発火しているのがわかります。
ちょっと触ると、focus、touchstart、touchendが追加されました。

２ページ目に移動。

３ページに移動。これを見ると、window.onloadはページを開いた時間ににあっている様子。
裏でonloadが発火しているというのは勘違いか・・・。

２ページに戻りタッチ。window.onloadは一度しか記録されていません。
これを見てわかる通りページ送りをしただけだと何もイベントが発生しませんので、ページが開かれたら何かをする、という制御ができないことがわかります。（何か方法はあるのかも？）

フィックス型の挙動

同様にフィックス型の挙動ですが、１ページ目を開いたときの挙動は同様です。

２ページ目を開いたところ。３ページ目がちらっと見えますが、どうやらすでにonloadが発火している様子。

３ページ目。微妙に２ページ目とタイムラグはありますがほぼ同時にonloadが発火していたのがわかります。つまり、フィックス型の見開きは大方の想定通り両ページともonloadが発火することになります。

ページをスワイプして２ページ目を表示させます。
大量にtouchmoveとresizeが記録されました。resizeが想定外な気がしますが表示領域が大幅に変わるためでしょうか。

ここで１ページに戻ります。

おお、ここではonloadが再発火。フィックス型ではリフローと違いページ表示ごとにonloadが発火するようです。

今度は、画面を横向きにしてみます。

orientationChangeが記録されました。
その状態で２ページ目を開くと・・・。

両ページのonloadが発火しています。onloadで一度初期化されてしまうためorientationChangeは記録されていません。
では、リフローではどうなるかというと。。。

EPUBを開き、２、３ページまで一度開きonloadを発生させ、１ページに戻り画面を横向きにします。
まずは１ページ目でorientationChangeが記録されました。

２、３ページがどうなっているかというと。

２ページ目。

３ページ目。
この通り、orientationChangeが各ページで記録されています。つまりiBooksがバックグラウンドでページをオープンしたままにしており、イベントも発生するようです。

まとめ

• フィックス型のEPUBでは、画面表示ごとにwindow.onloadが発火するが、リフロー型では一度開いたらwindow.onloadは再発火しない。
• リフロー型でもページを初回開いたタイミングでonloadが発火する。（EPUBを開いたタイミングで全ページonloadではない）
• リフロー型EPUBで、ページ送りでの再表示タイミングを捕捉するイベントはない？

iBooksではページを開いたタイミングで何かする、というのはリフロー型のEPUBではできないのかもしれません。

以下、テストで利用したページのソース
https://gist.github.com/4109674