Mobile Safari の iFrame 内にスクロールを実装するにはどうすればよいですか?

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);

<!-- HTML -->
<div>

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

以上がMobile Safari の iFrame 内にスクロールを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。