在iOs5 iPad / iPhone中滚动下的iframe内容无法渲染 [英] Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone

问题描述

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

I'm developing iPad html5 webpage that needs to display pages from other origins (different domains).

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

I'm loading those pages into iframe, and scrolling the iframe using the iOs5 new scrolling ability, as shown in the code below.

<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内容不会变得可见（框架）是空白的）。

The problem is that the off-screen iframe content is not becoming visible when scrolling to it (the frame is blank).

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

How can I overcome this issue and provide scrollable iframe solution?

推荐答案

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

OK. found the solution. apparently, the problem appear when the main document height is shorter than the iframe that is scrolled. the parts of the iframe page, that exceed the document height, are not rendered.

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

So, under my needs, I could solve the problem by adding such a js (with jquery) code:

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

这篇关于在iOs5 iPad / iPhone中滚动下的iframe内容无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！