Mobile Safari で iFrame を適切に表示するにはどうすればよいですか?

Mobile Safari で iFrame を適切に表示する

モバイル Web アプリケーションでは、iFrame を表示するときに、特にサイズの制限やスムーズなスクロールを可能にする際に課題が発生することがよくあります。彼らの中で。この記事では、この問題に対処し、iFrame を制約するための効果的な解決策を検討します。

問題

提供されたコード スニペットが示すように、iFrame 要素に高さと幅の属性を追加します。効果はありません。 iFrame を div に入れると制約は可能になりますが、iFrame 内でスクロールできなくなります。

解決策

モバイル Safari で iFrame を効果的に表示するには、次のアプローチを使用できます。採用:

• iFrame を div 内に入れる(#scroller).
• スクロール イベントを親に伝えるために iFrame コンテンツ内に JavaScript を実装します。 div.

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>

div 内に iFrame を含めることにより指定された JavaScript を実装すると、開発者はモバイル Safari で iFrame を適切に表示でき、両方に対処できます。サイズ制限とスクロール要件。

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