Html 如何让IFrame在iOS Safari中响应？_Html_Css_Iframe

Html 如何让IFrame在iOS Safari中响应？

html css iframe

Html 如何让IFrame在iOS Safari中响应？,html,css,iframe,Html,Css,Iframe,问题是，当您必须使用IFrame将内容插入到网站中时，在现代网络世界中，IFrame也应该具有响应性。理论上很简单，只需辅助使用或将CSS宽度设置为iframe{width:100%；}，但实际上并不那么简单，但可以如果iframe内容完全响应，并且可以在没有内部滚动条的情况下自行调整大小，那么iOS Safari将调整iframe的大小，而不会出现任何实际问题如果您考虑以下代码： <html> <head> <meta http-equiv="X-UA

问题是，当您必须使用IFrame将内容插入到网站中时，在现代网络世界中，IFrame也应该具有响应性。理论上很简单，只需辅助使用

或将CSS宽度设置为

iframe{width:100%；}

，但实际上并不那么简单，但可以

如果

iframe

内容完全响应，并且可以在没有内部滚动条的情况下自行调整大小，那么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内容是完全响应的（div#ScrolledArea有

溢出：scroll

set），并且iframe宽度是100%，iframe仍然占据div#ScrolledArea的整个宽度，就好像溢出根本不存在一样

在这种情况下，如果

iframe

内容上有滚动区域，问题就变成了，当iframe内容有水平滚动区域时，如何使

iframe

响应？这里的问题不在于Content.html没有响应，而在于iOS Safari只是简单地调整iframe的大小，以便

div#ScrolledArea

完全可见。

这个问题的解决方案其实很简单，有两种方法。如果您可以控制Content.html，只需将

div#ScrolledArea

width CSS更改为：

        width: 1px;
        min-width: 100%;
        *width: 100%;

基本上，这里的想法很简单，您可以将

宽度设置为小于视口的值（在本例中为iframe width），然后使用最小宽度：100%
覆盖它，以允许iOS Safari默认覆盖的实际宽度：100%
。*宽度：100%
的存在使代码保持与IE6兼容，但是如果您不喜欢IE6，可以忽略它


正如您现在看到的，div#scrolled区域
宽度实际上是100%，而溢出：scroll可以做它的事情并隐藏溢出的内容。如果您可以访问iframe内容，那么这是最好的
但是，如果您无法访问iframe内容（无论出于何种原因），那么您实际上可以在iframe本身上使用相同的技术。只需在iframe上使用相同的CSS即可：
    iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

但是，这有一个限制，您需要使用iframe上的scrolling=“no”
关闭滚动条，以使其正常工作：
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>



如果允许滚动条，那么这在iframe上就不再有效了。也就是说，如果改为修改Content.html，则可以在iframe中保留滚动
 CSS唯一解决方案
HTML

iframe中HTML页面的另一个问题似乎是，如果iframe包含的文档比您指定的文档宽，Mobile Safari将拒绝遵守iframe的宽度。例如：

在桌面浏览器上，您将看到iFrame和Div都设置为300px。内容更宽，因此您可以滚动iFrame
但是，在mobile safari上，您会注意到iFrame会自动扩展到内容的宽度
我的猜测是，这是一个解决长期存在的问题，滚动页面内的内容。在过去，如果你在触摸设备上有一个大的滚动iframe，你会被iframe“卡住”，因为那将是滚动而不是页面本身。看来苹果已经决定iFrame的默认行为是“无滚动”，并扩展以阻止它
一种选择可能是这种变通方法。与其假设iFrame将滚动，不如将iFrame放在您可以控制的DIV中，并让它滚动
例如：
标记示例：
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>



在mobile safari上，您现在可以通过包含它的div滚动现已完全扩展的iFrame的内容
缺点：这在桌面浏览器上看起来很难看，因为现在有了双滚动条。因此，您可能需要使用JS进行一些浏览器检测，以避免出现这种情况
 我需要一个跨浏览器的解决方案。要求是：

需要在iOS和其他地方工作
无法访问iFrame中的内容
需要它来滚动

我从iOS上的scrolling=“no”和iOS上的iFrame内容与屏幕的匹配中学到了一些东西，以下是我的结论。希望对某人有帮助=）
HTML
<div id="url-wrapper"></div>

JS
函数创建iframe（url）{
var wrapper=jQuery（'#url wrapper'）；
if（navigator.userAgent.match（/（iPod | iPhone | iPad）/）{
wrapper.addClass（'ios'）；
变量滚动='否'；
}否则{
变量滚动='是'；
}
jQuery（“”{
src:url，
id:'url'，
帧边框：0，
滚动：滚动
}).附件（包装纸）；
}
我在为iframe创建水平滚动条的内容窗格上遇到宽度问题。结果是一张图像的宽度比预期的要宽。我可以通过将所有图像的css最大宽度设置为一个百分比来解决这个问题
<meta name="viewport" content="width=device-width, initial-scale=1" />

img {
        max-width: 100%;
        height:auto;
    }


img{
最大宽度：100%；
高度：自动；
}
所有这些解决方案的问题在于，iframe
的高度从未真正改变
这意味着您将无法使用Javascript将iframe
中的元素居中，position:fixed，或位置：绝对因为iframe
本身从不滚动
我的解决方案是使用以下CSS将iframe的所有内容包装在div
中：
#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

这样，Safari认为内容没有高度，并允许您正确分配iframe
的高度。这还允许您以任何方式定位元素
我在工作
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

<div id="url-wrapper"></div>

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%;
}

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);

}

<meta name="viewport" content="width=device-width, initial-scale=1" />

img {
        max-width: 100%;
        height:auto;
    }

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

******************************************************

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



******************************************************

<div class="iframe_container">
      <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
        <!--  <img src="img/video-icon.png"> -->
      </iframe><br>
   </div>

.iframe_container {
  overflow: auto; 
  position: relative; 
  -webkit-overflow-scrolling: touch;
  height: 75%;
}

iframe {
  position:relative;
  top: 2%;
  left: 5%;
  border: 0 !important;
  width: 90%;
}

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 */
}

 $('iframe').width('100%');