如何在 Mobile Safari 中启用滚动并控制 iFrame 尺寸？

克服 Mobile Safari 中的 iFrame 显示挑战

尝试将 iFrame 合并到移动 Web 应用程序中时，在以下方面遇到困难并不罕见：控制其尺寸并在其中启用滚动。

约束尺寸

与预期相反，单独设置 iFrame 元素的高度和宽度属性不会限制其大小到 iPhone 屏幕。相反，将其包含在 div 元素中可以实现有效的尺寸限制。

启用滚动功能

但是，引入 div 约束会禁用 iFrame 内的滚动。要解决此问题，可以采取以下步骤：

在 iframe 内容中：

• 实现与父窗口通信以启动滚动的 JavaScript 函数基于触摸事件。

父窗口（iframe 之外）：

• 将 JavaScript 代码插入 iframe 内容。
• 定义一个可滚动的div来包围iFrame。当检测到触摸事件时，计算滚动位置调整并相应地更新 div 的scrollTop或scrollLeft属性。

示例代码：

JavaScript （iframe 内容）：

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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 内限制尺寸和滚动

iOS 6 更新注意：

值得注意的是，由于平台的变化，此解决方案可能不适用于 iOS 6。远程 Web 检查器也不再可用，这使得在设备上调试 JavaScript 问题变得具有挑战性。

以上是如何在 Mobile Safari 中启用滚动并控制 iFrame 尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！