Html 如何让 IFrame 在 iOS Safari 中响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23083462/
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
How to get an IFrame to be responsive in iOS Safari?
提问by Idra
The problem is that when you have to use IFrames to insert content into a website, then in the modern web-world it is expected that the IFrame would be responsive as well. In theory it's simple, simply aider use <iframe width="100%"></iframe>or set the CSS width to iframe { width: 100%; }however in practice it's not quite that simple, but it can be.
问题是，当您必须使用 IFrame 将内容插入网站时，那么在现代网络世界中，预计 IFrame 也会响应。从理论上讲，这很简单，只需辅助使用<iframe width="100%"></iframe>或设置 CSS 宽度即可，iframe { width: 100%; }但实际上并不是那么简单，但它可以。
If the iframecontent is fully responsive and can resize itself without internal scroll bars, then iOS Safari will resize the iframewithout any real issues.
如果iframe内容完全响应并且可以在没有内部滚动条的情况下调整自身大小，那么 iOS Safari 将调整大小而iframe不会出现任何实际问题。
If you consider the following code:
如果您考虑以下代码：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
With the Content.html:
使用Content.html：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>
Then this works without issues in iOS 7.1 Safari. You can change between landscape and portrait without any issues.
然后这在 iOS 7.1 Safari 中没有问题。您可以毫无问题地在横向和纵向之间切换。
However by simply changing the Content.htmlCSS by adding this:
但是，只需通过添加以下内容来更改Content.htmlCSS：
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
You get this:
你得到这个：
As you can see, even though the Content.htmlcontent is fully responsive (div#ScrolledAreahas overflow: scrollset) and the iframe width is 100% the iframe still takes the full width of the div#ScrolledAreaas if the overflow does not even exist. Demo
如您所见，即使Content.html内容完全响应（已设置div#ScrolledAreaoverflow: scroll）并且 iframe 宽度为 100%，iframe 仍然占据div#ScrolledArea的整个宽度，就好像溢出甚至不存在一样。演示
In cases like this, were the iframecontent has scrolling areas on it, the question becomes, how to get the iframeresponsive, when the iframe content has horizontally scrolling areas? The problem here is not in the fact that the Content.htmlis not responsive, but in the fact that the iOS Safari simply resizes the iframe so that the div#ScrolledAreawould be fully visible.
在这种情况下，iframe内容上是否有滚动区域，问题就变成了iframe，当 iframe 内容具有水平滚动区域时，如何获得响应？这里的问题不在于Content.html没有响应，而在于 iOS Safari 只是调整 iframe 的大小，以便div#ScrolledArea完全可见。
回答by Idra
The solution for this problem is actually quite simple and there are two ways to go about it. If you have control over the Content.htmlthen simply change the div#ScrolledAreawidth CSS to:
这个问题的解决方案实际上很简单，有两种方法可以解决。如果您可以控制Content.html，那么只需将div#ScrolledArea宽度 CSS更改为：
width: 1px;
min-width: 100%;
*width: 100%;
Basically the idea here is simple, you set the widthto something that is smaller than the viewport (iframe width in this case) and then overwrite it with min-width: 100%to allow for actual width: 100%which iOS Safari by default overwrites. The *width: 100%;is there so the code would remain IE6 compatible, but if you do not care for IE6 you can omit it. Demo
基本上这里的想法很简单，您将 设置width为小于视口（在这种情况下为 iframe 宽度）的值，然后使用它覆盖它min-width: 100%以允许实际的width: 100%iOS Safari 默认覆盖。该*width: 100%;有如此的代码将保持兼容IE6，但如果你不喜欢IE6，你可以忽略它。演示
As you can see now, the div#ScrolledAreawidth is actually 100% and the overflow: scroll;can do it's thing and hide the overflowing content. If you have access to the iframe content, then this is preferable.
正如您现在所看到的，div#ScrolledArea宽度实际上是 100% 并且overflow: scroll;可以做到这一点并隐藏溢出的内容。如果您有权访问 iframe 内容，则最好这样做。
However if you do not have access to the iframe content (for what ever reason) then you can actually use the same technique on the iframe itself. Simply use the same CSS on the iframe:
但是，如果您无权访问 iframe 内容（无论出于何种原因），那么您实际上可以在 iframe 本身上使用相同的技术。只需在 iframe 上使用相同的 CSS：
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
However, there is one limitation with this, you need to turn off the scrollbars with scrolling="no"on the iframe for this to work:
但是，这有一个限制，您需要关闭scrolling="no"iframe 上的滚动条才能使其工作：
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the Content.htmlinstead then you can retain the scrolling in the iframe. Demo
如果允许滚动条，那么这将不再适用于 iframe。也就是说，如果您修改Content.html，那么您可以保留 iframe 中的滚动。演示
回答by DA.
The problem, it seems, is that Mobile Safari will refuse to obey the width of your iFrame if the document it contains is wider than what you have specified. Example:
问题似乎在于，如果 iFrame 包含的文档比您指定的宽度宽，Mobile Safari 将拒绝遵守 iFrame 的宽度。例子：
On a desktop browser, you will see an iFrame and a Div both set to 300px. The contents is wider so you can scroll the iFrame.
在桌面浏览器上，您会看到一个 iFrame 和一个 Div 都设置为 300px。内容更宽，因此您可以滚动 iFrame。
On mobile safari, however, you will notice that the iFrame is auto-expanded to the width of the content.
但是，在移动 Safari 中，您会注意到 iFrame 会自动扩展到内容的宽度。
My guess is that this is a workaround for long-standing issues with scrolling content within a page. In the past, if you had a large scrolling iframe on a touch device, you'd get 'stuck' in the iframe as that would be scrolling instead of the page itself. It appears Apple has decided that the default behavior of an iFrame is 'no scroll' and expands to prevent it.
我的猜测是，这是解决页面内滚动内容的长期问题的一种解决方法。过去，如果您在触摸设备上有一个大型滚动 iframe，您会“卡住”在 iframe 中，因为它会滚动而不是页面本身。看来 Apple 已经决定 iFrame 的默认行为是“无滚动”并扩展以防止它。
One option may be this workaround. Instead of assuming the iFrame will scroll, place the iframe in a DIV that you do have control over and let that scroll.
一种选择可能是这种解决方法。不要假设 iFrame 会滚动，而是将 iframe 放在您可以控制的 DIV 中并让它滚动。
example: http://jsbin.com/zakedaja/1
示例：http: //jsbin.com/zakedaja/1
Example markup:
示例标记：
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
<iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>
On mobile safari, you can now scroll the contents of the now fully-expanded iFrame via the div that is containing it.
在移动 safari 上，您现在可以通过包含它的 div 滚动现在完全展开的 iFrame 的内容。
The catch: This looks really ugly on a desktop browser, as now you have double scrollbars. So you may have to do some browser detection with JS to get around this.
问题：这在桌面浏览器上看起来真的很丑，因为现在你有双滚动条。所以你可能需要用 JS 做一些浏览器检测来解决这个问题。
回答by gerbz
I needed a cross-browser solution. Requirements were:
我需要一个跨浏览器的解决方案。要求是：
- needed to work on both iOS and elsewhere
- don't have access to the content in the iFrame
- need it to scroll!
- 需要在 iOS 和其他地方工作
- 无权访问 iFrame 中的内容
- 需要它来滚动！
Building off what I learned from @Idraregarding scrolling="no" on iOS and this postabout fitting iFrame content to the screen in iOS here's what I ended up with. Hope it helps someone =)
根据我从@Idra学到的关于 iOS 上 scrolling="no" 的知识，以及这篇关于将 iFrame 内容适配到 iOS 屏幕的文章，这就是我最终得到的结果。希望它可以帮助某人 =)
HTML
HTML
<div id="url-wrapper"></div>
CSS
CSS
html, body{
height: 100%;
}
#url-wrapper{
margin-top: 51px;
height: 100%;
}
#url-wrapper iframe{
height: 100%;
width: 100%;
}
#url-wrapper.ios{
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
}
#url-wrapper.ios iframe{
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
}
JS
JS
function create_iframe(url){
var wrapper = jQuery('#url-wrapper');
if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
wrapper.addClass('ios');
var scrolling = 'no';
}else{
var scrolling = 'yes';
}
jQuery('<iframe>', {
src: url,
id: 'url',
frameborder: 0,
scrolling: scrolling
}).appendTo(wrapper);
}
回答by Pier
The problem with all these solutions is that the height of the iframenever really changes.
所有这些解决方案的问题是高度iframe永远不会真正改变。
This means you won't be able to center elements inside the iframeusing Javascript, position:fixed;, or position:absolute;since the iframeitself never scrolls.
这意味着您将无法在iframeusing Javascript, 中居中元素position:fixed;，或者position:absolute;因为它iframe本身从不滚动。
My solution detailed hereis to wrap all the content of the iframe inside a divusing this CSS:
我在这里详述的解决方案是div使用此 CSS将 iframe 的所有内容包装在 a 中：
#wrap {
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
This way Safari believes the content has no height and lets you assign the height of the iframeproperly. This also allows you to position elements in any way you wish.
这样 Safari 认为内容没有高度，并让您iframe正确分配高度。这也允许您以任何您希望的方式定位元素。
回答by Prathamesh Gharat
This issue is also present on iOS Chrome.
此问题也存在于 iOS Chrome 上。
I glanced through all the solutions above, most are very hacky.
我浏览了上面的所有解决方案，大多数都非常笨拙。
If you don't need support for older browsers, just set the iframe width to 100vw;
如果不需要支持旧版浏览器，只需将 iframe 宽度设置为 100vw 即可；
iframe {
max-width: 100%; /* Limits width to 100% of container */
width: 100vw; /* Sets width to 100% of the viewport width while respecting the max-width above */
}
Note : Check support for viewport units https://caniuse.com/#feat=viewport-units
注意：检查对视口单位的支持 https://caniuse.com/#feat=viewport-units
回答by S.Yadav
I am working with ionic2 and system config is as below-
我正在使用 ionic2，系统配置如下-
******************************************************
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************
For me this issue got resolved with this code-
for html iframe tag-
对我来说，此问题已通过此代码解决
- 对于 html iframe 标记 -
<div class="iframe_container">
<iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
<!-- <img src="img/video-icon.png"> -->
</iframe><br>
</div>
See css of the same as-
见与-相同的css
.iframe_container {
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
height: 75%;
}
iframe {
position:relative;
top: 2%;
left: 5%;
border: 0 !important;
width: 90%;
}
Position property play a vital role here in my case.
position:relative;
就我而言，位置属性在这里起着至关重要的作用。
位置：相对；
It may help you too!!!
也可以帮到你！！！
回答by Luiz Rossi
in fact for me just worked in ios disabling the scroll
事实上对我来说只是在 ios 中禁用滚动
<iframe src="//www.youraddress.com/" scrolling="no"></iframe>
<iframe src="//www.youraddress.com/" scrolling="no"></iframe>
and treating the OS via script.
并通过脚本处理操作系统。
回答by umer
For me CSS solutions didn't work. But setting the width programmatically does the job. On iframe load set the width programmatically:
对我来说，CSS 解决方案不起作用。但是以编程方式设置宽度可以完成这项工作。在 iframe 加载时以编程方式设置宽度：
$('iframe').width('100%');
回答by Dr. Aaron Dishno
I had an issue with width on the content pane creating a horizontal scroll bar for the iframe. It turned out that an image was holding the width wider than expected. I was able to solve it by setting the all of the images css max-width to a percent.
我在为 iframe 创建水平滚动条的内容窗格上遇到宽度问题。事实证明，图像的宽度比预期的要宽。我能够通过将所有图像 css max-width 设置为百分比来解决它。
<meta name="viewport" content="width=device-width, initial-scale=1" />
img {
max-width: 100%;
height:auto;
}
回答by 4dgaurav
CSS only solution
仅 CSS 解决方案
HTML
HTML
<div class="container">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
CSS
html,body {
height:100%;
}
.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Another demo herewith HTML page in iframe
在 iframe 中使用 HTML 页面的另一个演示
