iOS 上的 IFrame 高度问题（移动 Safari）答案

【问题标题】：IFrame height issues on iOS (mobile safari)iOS 上的 IFrame 高度问题（移动 Safari）
【发布时间】：2016-03-23 01:30:42
【问题描述】：

示例页面来源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

问题是，来自 IFrames 内联样式的 height 或 200px 在移动 safari 中被忽略：

我还想通过 vanilla JavaScript 动态更改 IFrame 的高度，这在以下代码中根本不起作用：

document.getElementsByTagName('iframe')[0].style.height = "100px"

height 样式的值已根据开发工具正确更改，但由于 IFrame 的实际渲染高度没有改变，因此它被简单地忽略了。

这似乎只是移动 Safari 中的一个问题，并且在最新版本的桌面 Safari、Firefox、Chrome、Androids WebView 等上按预期工作。

测试页：http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.：我在 browserstack 上使用各种设备对此进行了测试，并在那里截取了屏幕截图，因为我手头没有实际的 iDevice。

【问题讨论】：

标签： javascript ios iphone iframe mobile-safari

【解决方案1】：

看起来像这样：How to get an IFrame to be responsive in iOS Safari?

iFrame 仅在 iOS 上存在问题，因此您必须调整 iframe 以适应它。

您可以放置一个包装 iframe 的 div，在 iframe 上设置 css，对我有用的是添加：放置属性 scrolling='no'。

祝你好运。

【讨论】：

The solution 在提到的线程中解决了我在旋转设备时出现的问题的一部分。由于我实际上可以访问 IFrame 内容的来源，因此我能够通过将 IFrame 主体的高度动态设置为我尝试在 IFrame 本身上设置的相同高度来解决我的高度问题。

【解决方案2】：

我遇到了同样的问题。在尝试了我能找到的所有解决方案之后，我终于找到了解决方法。

这个问题是由iOS Safari引起的，它会自动扩展iframe的高度以适应里面的页面内容。

如果你把scrolling='no'属性放到iframe中为<iframe scrolling='no' src='content.html'>，这个问题可以解决，但是iframe不能显示页面的全部内容，超出框架的内容会被剪掉。

所以我们需要放置一个 div 包裹 iframe，并在其中处理滚动事件。

<style>
.demo-iframe-holder {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>

参考：

https://davidwalsh.name/scroll-iframes-ios

How to get an IFrame to be responsive in iOS Safari?

希望对你有帮助。

【讨论】：

【解决方案3】：

问题：

我遇到了同样的问题。调整 iframe 的容器 div 的大小/样式并将 scrolling="no" 添加到 iframe 对我不起作用。像 Freya 描述的那样滚动溢出也不是一种选择，因为我的 iframe 的内容需要根据父容器调整大小。以下是我的原始（不工作，溢出其容器）iframe 代码的结构：

<style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100%;
        height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

解决方案：

这个超级简单的 CSS 小技巧成功了：

<style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100px;
        min-width:  100%;
        height: 100px;
        min-height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

将 iframe 的高度/宽度设置为一些小的随机像素值。将它的最小高度和最小宽度设置为您实际想要的高度/宽度。这完全解决了我的问题。

【讨论】：

显然添加 min-width 和 min-height 对我不起作用，如果它起作用我会感到惊讶。 Answer by freya-yu 成功了。
只有 scrolling="no" 和这个 css 技巧对我有用。