如何让IFrame在iOS Safari中响应迅速？
问题是，当您必须使用IFrames将内容插入到网站中时，那么在现代Web世界中，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：
<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>
那么这在iOS7.1 Safari中可以正常工作,没有任何问题。您可以在风景和肖像之间进行转换，没有任何问题。
但是，只需通过添加以下内容来更改content.html CSS：
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
你得到这个：
如您所见，即使content.html内容完全响应(div#ScrolledArea设置了overflow：scroll)并且iframe宽度为100%，但iframe仍然使用div#ScrolledArea的全部宽度，就好像溢出并不存在一样。演示
在这种情况下，如果iframe内容上有滚动区域，那么问题就变成了，当iframe内容有水平滚动区域时，如何使iframe响应？这里的问题不是content.html没有响应，而是iOS Safari只是调整iframe的大小，以便div#scrolledarea完全可见。
共有1个答案
这个问题的解决方法其实很简单，有两种方法。如果您对content.html有控制权，那么只需将div#scrolledareawidth CSS更改为：
width: 1px;
min-width: 100%;
*width: 100%;
基本上，这里的思想很简单，您将width设置为小于视口（本例中为iframe width）的值，然后用min-width:100%覆盖它，以允许iOS Safari默认覆盖的实际width:100%。*width：100%；是这样的，所以代码将保持与IE6兼容，但如果您不关心IE6，您可以省略它。演示
正如您现在看到的，div#scrolledarea的宽度实际上是100%，而overflow：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中保留滚动。演示
-
问题内容： 如何让selenium等待日历小部件的加载？现在，我只是在将测试用例导出到junit程序后进行操作。 问题答案： 我会用 这将一直等待，直到元素出现在DOM中为止。 如果您需要检查元素是否可见，则最好使用
-
问题内容： 如何让硒等待日历小部件的加载？现在，在将测试用例导出到junit程序后，我只是在做一个。 问题答案： 我会用 这将一直等待，直到元素出现在DOM中为止。 如果您需要检查元素是否可见，则最好使用
-
JavaFX MenuItem可以通过设置ActionEvent EventHandler来响应大多数按键事件。但是，虽然事件处理程序捕获KeyCode.Enter的按键，但它不捕获KeyCode.Tab按键事件。显然，像TAB这样的一些关键事件是在更深层次上处理的。例如，箭头键启用菜单的遍历。 My ContextMenu是用户开始在TextField中键入的电子邮件地址字符串的完整列表。用户希
-
问题内容： 我希望轮播图片位于水平（水平）中心，默认情况下不是这样。我遵循此主题上的解决方案。 但是，使用此解决方案时，当轮播被调整大小并小于图像时，图像将被裁剪，而不是默认缩放。 如何既可以使我的图像居中，又可以使其延伸到轮播项目上？ 问题答案： 现在（在Boostrap 3和Boostrap 3上）简单地：
-
问题内容： 我正在尝试将google.com放入我网站上的iframe中，这可与包括yahoo在内的许多其他网站一起使用。但它不适用于Google，因为它只显示一个空白的iframe。为什么不渲染？有什么窍门吗？ 我已经尝试过以通常的方式在iframe中显示网站，如下所示： google.com页面未在iframe中呈现，只是空白。到底是怎么回事？ 问题答案： 这样做的原因是，Google正在发送
-
我目前正在运行Wiremock standalone，我试图模拟一个访问数据库的服务。 我的映射文件如下所示：- 所以如果我点击这个网址：- http://localhost/testService/search/details?productCode=12345 然后它将进入数据库获取退货产品12345。 如果我向服务发送数据库中不存在的请求（例如productCode=0），它会给我一个标准的