在 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 代码示例this:

// 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 的内容进行交互。