如何让IFrame在iOS Safari中响应？
问题是，当你不得不使用IFrame将内容插入到网站时，那么在现代networking世界中，IFrame也会有所反应。 理论上它很简单，简单地使用<iframe width="100%"></iframe>或者将CSS宽度设置为iframe { width: 100%; } 但实际上并不是那么简单，但可以。
如果iframe内容是完全响应的，并且可以在没有内部滚动条的情况下自行resize，那么iOS Safari将会调整iframe大小，而不会有任何实际的问题。
如果你考虑下面的代码：
<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>
通过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>
然后，这在iOS 7.1 Safari中没有问题。 您可以在风景和肖像之间切换而不会有任何问题。
但是，只需通过添加以下内容来更改Content.html CSS：
#ScrolledArea { width: 100%; overflow: scroll; white-space: nowrap; background: #ff0000; }
你得到这个：
正如你所看到的，即使Content.html内容是完全响应的（ div＃ScrolledArea overflow: scroll set），并且iframe宽度是100％，iframe仍然占用div＃ScrolledArea的全部宽度，就好像溢出没有甚至存在。 演示
在这样的情况下，如果iframe内容有滚动区域，问题就变成了，iframe内容有水平滚动区域时如何获得iframe响应？ 这里的问题并不在于Content.html没有响应，事实上iOS Safari只是调整iframe的大小，以便div#ScrolledArea完全可见。
这个问题的解决scheme其实很简单，有两种方法可以解决这个问题。 如果你可以控制Content.html，那么只需将div#ScrolledArea width CSS更改为：
width: 1px; min-width: 100%; *width: 100%;
基本上这里的想法很简单，你把width设置为小于视口（在这种情况下，iframe宽度），然后用min-width: 100%覆盖它min-width: 100%以允许实际width: 100%默认iOS Safari覆盖。 *width: 100%; 是否有代码将保持IE6兼容，但如果你不关心IE6，你可以省略它。 演示
正如你现在所看到的， div#ScrolledArea宽度实际上是100％， overflow: scroll; 可以做到这一点，并隐藏溢出的内容。 如果您有权访问iframe内容，那么这是更可取的。
但是，如果您无法访问iframe内容（出于某种原因），那么您实际上可以在iframe本身上使用相同的技术。 简单地在iframe上使用相同的CSS：
iframe { width: 1px; min-width: 100%; *width: 100%; }
然而，这有一个限制，你需要在iframe上closures滚动条scrolling="no"的滚动条才能工作：
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
如果滚动条被允许，那么这将不再在iframe上工作。 也就是说，如果您修改Content.html，那么您可以保留iframe中的滚动。 演示
问题似乎是，如果移动Safari包含的文档比您指定的宽，则它将拒绝服从您的iFrame的宽度。 例：
在桌面浏览器上，您将看到一个设置为300px的iFrame和Div。 内容更宽，因此您可以滚动iFrame。
但是，在移动Safari浏览器中，您会注意到iFrame会自动扩展到内容的宽度。
我的猜测是，这是一个解决长期存在的页面内滚动内容的问题。 在过去，如果你在触摸设备上有一个大的滚动iframe，你会被“卡住”在iframe中，因为这是滚动而不是页面本身。 看来苹果已经决定了一个iFrame的默认行为是“不滚动”，并扩大阻止它。
一个选项可能是这种解决方法。 而不是假定iFrame将滚动，将iframe放置在您可以控制的DIV中，然后滚动。
例如： http ： //jsbin.com/zakedaja/1
示例标记：
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;"> <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe> </div>
在移动Safari浏览器中，您现在可以通过包含它的div滚动现在完全展开的iFrame的内容。
问题：在桌面浏览器上看起来真的很丑，就像现在有双滚动条一样。 所以你可能不得不用JS来做一些浏览器检测来解决这个问题。
我需要一个跨浏览器解决scheme。 要求是：
- 需要iOS和其他地方
- 无法访问iFrame中的内容
- 需要它滚动！
build立在@Idra上关于iOS上滚动=“否”的知识，以及关于如何将iFrame内容适配到iOS屏幕的问题。 希望它可以帮助别人=）
HTML
<div id="url-wrapper"></div>
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
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); }
所有这些解决scheme的问题是， iframe的高度永远不会改变。
这意味着你将无法使用Javascript将iframe元素居中， position:fixed; ，或者position:absolute; 因为iframe本身从不滚动。
这里我详细的解决scheme是使用这个CSS将iframe中的所有内容封装在div ：
#wrap { position: fixed; top: 0; right:0; bottom:0; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
通过这种方式，Safari认为内容没有高度，可以正确指定iframe的高度。 这也可以让你以任何你想要的方式定位元素。
你可以在这里看到一个快速和肮脏的演示。
CSS只有解决scheme
HTML
<div class="container"> <div class="h_iframe"> <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> </div> </div>
CSS
html,body { height:100%; } .h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
DEMO
在iframe中的HTML页面的另一个演示
内容窗格上的宽度有问题，为iframe创build一个水平滚动条。 原来，一幅图像的宽度比预期的要宽。 我能够通过将所有图像的css max-width设置为百分比来解决这个问题。
<meta name="viewport" content="width=device-width, initial-scale=1" /> img { max-width: 100%; height:auto; }
我正在使用ionic2并且系统configuration如下 –
****************************************************** 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 ******************************************************
对我来说，这个问题已经解决了这个代码 –
为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>
看到相同的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%; }
在我的情况下，位置属性在这里扮演着重要angular色。
位置：相对;
它也可以帮助你！
