如何在 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中文网其他相关文章！