iframe 内容未在 iOs5 iPad/iPhone 中的滚动下呈现 [英] Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone

问题描述

我正在开发 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>

问题是屏幕外 iframe 内容在滚动到它时不可见(框架是空白的).

我如何克服这个问题并提供可滚动的 iframe 解决方案?

解决方案

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

所以，根据我的需要，我可以通过添加这样一个js(with jquery)代码来解决问题:

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

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>

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

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

解决方案

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.

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>

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