14
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

モバイルブラウザでの iframe の挙動(Mobile Safari, Chrome for Android)

Last updated at Posted at 2014-11-25

JavaScript の実行速度や描画効率が体感 15〜20% 程度落ちる。

Mobile Safari での動作

(overflow:scroll の指定を前提にしています)

iOS では iframe の扱いが特殊になり、親ドキュメントのプロセス内で動作しているかのような扱いになる。

  • iframe の height 指定は不可(コンテンツの縦サイズに従ってベタ伸び)
  • document.body.offsetHeight == window.innerHeight が成立する
  • (関連して)スクロールに関与するプロパティや関数は親側に紐付く
  • iframe コンテンツ内で body.scrollTop を取っても常に 0 が返る
  • 動作イメージとして、コンテンツが縦横フルスケールで描画されたブロック要素に対して親ドキュメントが重なり、スクロールに対しては親ドキュメントを動かしているようなものだと思えば大体当てはまる

諸々

  • window.onload は発火しない
  • unload 系はそもそも depricated なので発動しない
  • iframe 側の onload イベントで代用可能と思われる(タイミングの互換性は計測していないので注意)
  • screen オブジェクトや scroll*、offset* プロパティは親側を参照する必要がある
  • scroll、resize 等のイベントも同じ(親側のイベントハンドラを用いる際はメモリリーク注意)

page cache 問題(バグ)

Mobile Safari では iframe に内包された URL に紐付くページキャッシュが更新されない問題がある。

iframe 内で遷移やリロードを行った場合は、その URL に紐付く page cache が更新されない。
ページバックを行うと page cache がある場合(iframe 外で生成されていた場合)はその page cache が参照され、存在しない場合は一度だけ page cache が生成される。

iframe 内である限り、一度生成された page cache は更新されない(遷移、location.reload とも)。

iOS 7

  • フリックバックを行うと数秒フリーズする
  • page cache 問題がある
  • 更にローディングインジケータが途中で停止して以後復帰しない、通信マーク横のローディングスピナーが回りっぱなしになる、といった動作異常も見せる

iOS 8

  • page cache 問題がある
14
16
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?