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

Question

我正在开发需要显示来自其他来源(不同域)的页面的iPad html5网页.

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

<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>