Javascript iOS 上的 IFrame 高度问题（移动 Safari）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34320046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IFrame height issues on iOS (mobile safari)
提问by suamikim
Example page source:
示例页面来源：
<!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>
The problem is, that heightof 200pxfrom the IFrames inline style is ignored on mobile safari:
问题是，在移动 Safari 中忽略height了200px来自 IFrames 的内联样式：
Also I'd like to change the height of the IFrame dynamically via vanilla JavaScript which is not working at all with the following code:
另外，我想通过 vanilla JavaScript 动态更改 IFrame 的高度，这在以下代码中根本不起作用：
document.getElementsByTagName('iframe')[0].style.height = "100px"
The value of the heightstyle is changed correctly according to the dev tools but it's simply ignored since the actually rendered height of the IFrame doesn't change.
height样式的值根据开发工具正确更改，但它被简单地忽略，因为 IFrame 的实际渲染高度不会改变。
This only seems to be a problem in mobile Safari and is working as expected on the latest versions of desktop Safari, Firefox, Chrome, Androids WebView etc.
这似乎只是移动 Safari 中的一个问题，并且在最新版本的桌面 Safari、Firefox、Chrome、Androids WebView 等上按预期工作。
Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html
测试页：http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.:I tested this with various devices on browserstack and also took the screenshots there since I don't have no actual iDevice at hand.
Ps.：我用浏览器堆栈上的各种设备对此进行了测试，并在那里截取了屏幕截图，因为我手头没有实际的 iDevice。
采纳答案by Gabriel Augusto
It looks like this: How to get an IFrame to be responsive in iOS Safari?
看起来像这样：如何让 IFrame 在 iOS Safari 中响应？
iFrames have an issue on iOS only, so you have to adapt your iframe to it.
iFrame 仅在 iOS 上有问题，因此您必须使 iframe 适应它。
You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.
您可以放置一个 div 包裹 iframe，在 iframe 上设置 css，对我有用的是添加：放置属性 scrolling='no'。
Wishing you luck.
祝你好运。
回答by Freya Yu
I got the same issue. And after tried all solutions I could find, I finally found how to solve it.
我遇到了同样的问题。在尝试了我能找到的所有解决方案之后，我终于找到了解决方法。
This issue is caused by the iOS Safari, it will auto-expend the hight of iframe to fit the page content inside.
此问题是由 iOS Safari 引起的，它会自动扩展 iframe 的高度以适应其中的页面内容。
If you put the scrolling='no' attribute to the iframe as <iframe scrolling='no' src='content.html'>, this issue could be solved but the iframe could not show the full content of the page, the content which exceeds the frame will be cut.
如果将 scrolling='no' 属性设置为 iframe <iframe scrolling='no' src='content.html'>，则可以解决此问题，但 iframe 无法显示页面的全部内容，超出框架的内容将被剪切。
So we need to put a div wrapping the iframe, and handle the scroll event in it.
所以我们需要在iframe里面放一个div，在里面处理scroll事件。
<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>
references:
参考：
https://davidwalsh.name/scroll-iframes-ios
https://davidwalsh.name/scroll-iframes-ios
How to get an IFrame to be responsive in iOS Safari?
Hope it helps.
希望能帮助到你。
回答by AnnaFractuous
PROBLEM:
问题：
I was having the same issue. Sizing/styling the iframe's container div and adding scrolling="no" to the iframe didn't work for me. Having a scrolling overflow like Freya describes wasn't an option, either, because the contents of my iframe needed to size depending on the parent container. Here's how my original (not working, overflowing its container) iframe code was structured:
我遇到了同样的问题。调整 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>
SOLUTION:
解决方案：
This super simple little CSS hack did the trick:
这个超级简单的 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>
Set the iframe's height/width to some small, random pixel value. Set it's min-height & min-width to what you actually want the height/width to be. This completely fixed the issue for me.
将 iframe 的高度/宽度设置为一些小的随机像素值。将其 min-height & min-width 设置为您实际想要的高度/宽度。这完全解决了我的问题。
