Mobile Safari での iFrame の表示

iOS デバイスの Safari を使用してモバイル Web アプリケーション内に iFrame を埋め込もうとすると、共通の課題が 1 つ発生します。それは、iFrame のサイズを制限することです。 iPhoneの画面にフィットします。 iFrame 要素内の高さと幅の属性は、多くの場合効果がありません。

ただし、簡単な解決策は、iFrame を div 要素内で囲むことです。これにより iFrame のサイズを制御できるようになりますが、iFrame 内でスクロールできないという新たな問題が発生します。

この問題に対処するには、次の手順を実行してください:

1. iFrame を高さと幅を指定した div でラップし、その寸法を制限します。
2. iFrame コンテンツ内で、JavaScript を実装して、それを囲んでいるコンテンツと通信します。 div の親。
3. iFrame 本体にタッチ イベント リスナーを追加して、タッチ イベントをキャプチャし、それに応じて親のスクロール位置を更新します。

以下は、JavaScript と HTML コードの例です。これを達成します:

// JavaScript
setTimeout(function () {
  var startY = 0;
  var startX = 0;
  var b = document.body;
  b.addEventListener("touchstart", function (event) {
    parent.window.scrollTo(0, 1);
    startY = event.targetTouches[0].pageY;
    startX = event.targetTouches[0].pageX;
  });
  b.addEventListener("touchmove", function (event) {
    event.preventDefault();
    var posy = event.targetTouches[0].pageY;
    var h = parent.document.getElementById("scroller");
    var sty = h.scrollTop;

    var posx = event.targetTouches[0].pageX;
    var stx = h.scrollLeft;
    h.scrollTop = sty - (posy - startY);
    h.scrollLeft = stx - (posx - startX);
    startY = posy;
    startX = posx;
  });
}, 1000);

iFrame コンテンツを制御しない場合は、代わりにオーバーレイを実装できることに注意してください。ただし、このソリューションでは、スクロール以外の iFrame のコンテンツとの対話は許可されません。