iframe 内容未在 iOs5 iPad/iPhone 的滚动下呈现

Posted 2023-03-12

【中文标题】iframe 内容未在 iOs5 iPad/iPhone 的滚动下呈现

【英文标题】：Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone

【发布时间】：2012-01-18 14:55:17

【问题描述】：

我正在开发需要显示来自其他来源（不同域）的页面的 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 解决方案？

【问题讨论】：

已解决，我稍后会发布答案..

【参考方案1】：

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

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

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

【讨论】：

任何人都知道如何使用 ExtJS 或原生 JS 来做到这一点，因为我没有 jQuery 可用吗？

【参考方案2】：

如果您有权访问 iFrame 主体，请对其内容应用一些 transform3d 以启用 GPU 渲染。

在我的例子中，将 -webkit-transform: translate3d(0, 0, 0); 添加到主包装 div 就可以了。

【讨论】：

这对我有用。就我而言，我必须在我的框架上设置这种样式，该框架在 CSS 中设置了 height: 100%。

对我来说这不起作用，我创建了一个新问题：***.com/questions/55068656/…