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

Question

示例页面来源：

<!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 of 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。

Answer 1

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

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

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

祝你好运。

Answer 2

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

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

如果将 scrolling='no' 属性作为 <iframe scrolling='no' src='content.html'> 放到 iframe 中，这个问题可以解决，但是 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?

希望对您有所帮助。

Answer 3

问题：

我遇到了同样的问题。 Sizing/styling iframe 的容器 div 和向 iframe 添加 scrolling="no" 对我不起作用。像 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 hack 成功了：

<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 的 height/width 设置为一些较小的随机像素值。将它的 min-height 和 min-width 设置为您实际想要的 height/width 。这完全解决了我的问题。

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

IFrame height issues on iOS (mobile safari)

javascript

iphone

iframe

mobile-safari

ios