如何在 Mobile Safari 上的 iFrame 內實現滾動？

在Mobile Safari 中顯示iFrame

嘗試在iOS 裝置上使用Safari 將iFrame 嵌入到行動Web 應用程式中時，會出現一個常見的挑戰：將出現一個常見的挑戰：將出現一個常見的挑戰：將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中文網其他相關文章！