読者です 読者をやめる 読者になる 読者になる

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が大量に発生してしまうため、この二つは表示しないようにしています。

リフロー型の挙動
f:id:uraito:20121119165235j:plain

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

f:id:uraito:20121119165258j:plain

2ページ目に移動。

f:id:uraito:20121119165326j:plain

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

f:id:uraito:20121119165315j:plain

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


フィックス型の挙動
f:id:uraito:20121119161830j:plain

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

f:id:uraito:20121119161916j:plain

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

f:id:uraito:20121119161933j:plain

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

f:id:uraito:20121119161952j:plain

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

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

f:id:uraito:20121119161956j:plain

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

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

f:id:uraito:20121119162002j:plain

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

f:id:uraito:20121119162011j:plain

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

f:id:uraito:20121119162023j:plain

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

2、3ページがどうなっているかというと。

f:id:uraito:20121119162032j:plain

2ページ目。

f:id:uraito:20121119162039j:plain

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


まとめ

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

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

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