如何使 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>
<p><strong>注意：</strong>当 iframe 内容不受您控制时，您可以在 iframe 上创建覆盖层并实现类似的滚动功能。但是，与 iframe 内容的交互（例如单击链接）将受到限制。</p>
<p><strong>其他注意事项：</strong></p>
<ul>
<li>在 iOS 6 及更高版本中，此解决方案不适用工作时间更长，并且尚未发现可靠的替代方案。</li>
<li>远程 Web 检查器（Safari 的调试工具）现在需要 Mac，这使得设备上调试更具挑战性。</li>
</ul>
</div>

以上是如何使 iFrame 在 Mobile Safari 中可滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！