Question

我正在开发需要显示来自其他来源（不同域）的网页的iPad html5网页。

我正在将这些页面加载到iframe，并使用iOs5新的滚动功能滚动iframe，如下面的代码所示。

<div id="myDiv" style="height: 1185px; width: 100%; overflow:scroll; -webkit-overflow-scrolling: touch;">
    <iframe id="myIframe" src="http://http://css-tricks.com/forums/discussion/11946/scrolling-iframe-on-ipad/p1"></iframe>
</div>

问题是当滚动到屏幕外iframe内容时（屏幕空白），屏幕外iframe内容不会变得可见。

如何克服此问题并提供可滚动的iframe解决方案？

Answer 1

行。找到了解决方案。显然，当主文档高度小于滚动的iframe时，会出现问题。 iframe页面的超出文档高度的部分不会被渲染。

所以，根据我的需要，我可以通过添加这样的js（带jquery）代码来解决问题：

<script>
$(function() {
     var iframe = $("#myIframe");    
     iframe.load(function() {
         $("body").height(iframe.height());
     });
 });
</script>

Answer 2

如果您有权访问iFrame正文，请在其内容中应用一些transform3d。在我的情况下，将-webkit-transform: translate3d(0, 0, 0);添加到主包装div就完成了这项工作。

在iOs5 iPad / iPhone中滚动下的iframe内容无法渲染

2 个答案: