Question

这是问题所在，我有并且需要iframe网页。这个iframe必须具有一定的宽度/高度。这在iOS中不起作用，因为可爱的iOS决定忽略帧的高度属性并强制显示所有内容（混蛋！）。

你如何让它充当普通的iframe？

Answer 1

如果您拥有或有权修改框架页面，我找到了一种方法。

如果您控制的网页是iframed in，我发现哪种方式效果很好的方法是将整个内容（不是IFRAME）用div直接嵌入iframed页面。因此，在标记之后放置标记。

然后，测试Safari移动设备，如果它是iframed。

browser_=/iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;

如果符合此条件，则将放入框架页面的div高度设置为iframe的高度，并将div的溢出设置为auto。这将产生一种错觉，它是一个iframe。

现在，最后但并非最不重要的是将iframe标记包装在

中

<div style="-webkit-overflow-scrolling:touch; overflow: auto;">

如果您有使用jQuery（窗口）或其他类似的元素，请确保将其切换为使用DIV，因为窗口（iframe）会自动扩展它，因为iframe已经扩展，所以它不是很有用。

Answer 2

经过努力奋斗后，我终于找到了一种方法让ifos在ios中滚动。请按如下方式进行：

只需在div中放置一个iframe（div就像充当容器的元素一样）并按如下方式应用样式，这非常有效。

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

当我在GWT工作时，对于GWT人来说，这是一个建议。如果是GWT，只需在ScrollPanel（div）中放置一个iframe，然后应用上面的样式。

Answer 3

首先，我使用以下代码为iframe，这项工作适用于所有网站和android mobileapp，ipad除了iphone。而在iPhone按钮点击不工作ans css受到干扰。

<iframe class ="holds-the-iframe" src="http://stackoverflow.com"  style="width:100%; height:100%;" seamless="seamless" ></iframe>

然后我们使用像素中的高度，这是我们从2000px开始的最大值，并且减少它仍然工作并且设置宽度= 100％。这适用于所有设备。

<iframe  src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>

iFrame和Mobile Safari（iPad / iPhone）

3 个答案: