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

請注意，如果您不控制 iFrame 內容，則可以實現覆蓋。但是，除了滾動之外，此解決方案不允許與 iFrame 的內容進行互動。