如何在 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>

透過將iFrame包含在 div 中並實作指定的 JavaScript，開發人員可以在行動 Safari 中正確顯示 iFrame，解決尺寸限制和滾動問題要求。

以上是如何在 Mobile Safari 中正確顯示 iFrame？的詳細內容。更多資訊請關注PHP中文網其他相關文章！