如何讓 iFrame 在 Mobile Safari 中可捲動？

在Mobile Safari 應用程式中顯示iFrame：完整指南

將iFrame 合併到行動Web 應用程式中可能是一項挑戰，尤其是在旨在限制其尺寸。儘管設定了高度和寬度屬性，iframe 可能仍然不受約束。

解決方案：

將 iframe 包含在 div 中以控制其尺寸。然而，這種方法在 iframe 中引入了滾動限制。

要克服這個問題，請實作以下策略：

• JavaScript 整合： 在 iframe 中放置一個腳本內容。
• 事件處理： 監聽觸控事件iframe。
• 父級通訊：透過 JavaScript 通知父級 div 有關滾動事件。

範例程式碼：

iframe 的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>

父級的HTML div:

父級的HTML div:

• 注意：
當iframe 內容不受您控制時，您可以在iframe 上建立覆蓋層並實現類似的滾動功能。但是，與 iframe 內容的互動（例如點擊連結）將受到限制。

其他注意事項：在iOS 6 及更高版本中，此解決方案不適用工作時間更長，並且尚未發現可靠的替代方案。 遠端 Web 檢查器（Safari 的偵錯工具）現在需要 Mac，這使得裝置上偵錯更具挑戰性。

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