如何在 Mobile Safari 中正确显示 iFrame？

在 Mobile Safari 中正确显示 iFrame

移动 Web 应用程序在显示 iFrame 时经常遇到挑战，特别是在限制其大小和允许平滑滚动方面在他们之内。本文解决了这个问题，探索了约束 iFrame 的有效解决方案。

问题

如提供的代码片段所示，向 iFrame 元素添加高度和宽度属性没有影响。将 iFrame 封装在 div 中可以实现约束，但会阻止在 iFrame 内滚动。

解决方案

为了在移动 Safari 中有效显示 iFrame，可以使用以下方法：使用：

• 将 iFrame 封装在 div 中 (#scroller)。
• 在 iFrame 内容中实现 JavaScript，以将滚动事件传递给父 div。

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 包含在 div 中并实现指定的 JavaScript，开发人员可以正确地在移动 Safari 中显示 iFrame，解决尺寸限制和滚动要求。

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