iFrame和Mobile Safari(iPad / iPhone)

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

你如何让它成为一个普通的iframe?

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

如果您控制的网页是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标签

 

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

经过艰苦的努力,终于我找到了一种方法来制作ios中的iframe滚动。如下:

只需在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,然后应用上面的样式。

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