Question

我正在寻找正确的方式，以确保在ipad / iOS5上的iframe中滚动后，动态显示的内容是可见的。

哦，Iframes和iPad - 你真是个美妙的老chesnut。我知道：

iPad将iframe扩展到其中内容的完整高度（几乎就像使用HTML5的“seamless”属性一样，但并不完全，因为它不会从父级继承样式或事件）。奇怪，对许多人来说很烦人，但确实如此。
<iframe height="100%">无用，因为它的内容大小不是容器

我需要将iframe包装在div中 - la

<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>

或者引入一些trickery来设置框架的滚动位置（我认为这是基于this article中提到的技巧）

我的问题是，iframe主体内部动态显示的内容（例如jquery标签，手风琴等）可能会导致浏览器在页面的显示范围内裁剪内容。

E.g。如果我的“标签”大部分位于iframe内部的可见视口中，我执行双指滚动（或实现单指scrollTop hack），然后将该内容滚动到视图中，之前的一些内容未绘制的仍然未提取。再次单击第二个选项卡/后退会使内容显示为好像页面不绘制屏幕外内容。在此之后，如果我然后向上滚动到页面顶部，则不会为页面的开头绘制内容（之前可见）。使用双指滚动向上和向下滚动页面可以解决问题。

我读过this article表示问题已解决。但它似乎没有完全修复;并且仍然没有解决这个问题，因为你必须将你的iframe包装在div中并在该div上放置滚动条，桌面浏览器可能显示双滚动条，具体取决于它们如何解释{{1} }。

P.S。我在iframe内部和外部使用HTML5样板页面，并使用正确的元视口设置。

Answer 1

我发现通过使文档与iframe内容一样高，我也能够解决问题。（按照建议Iframe Content Not Rendering Under Scroll In iOs5 iPad/iPhone）但在我的情况下，我不希望用户能够在现在高的应用程序中向下滚动，因为它应该是一个全屏应用程序。我使用此代码来防止垂直滚动：

/*
Prevent Scrolling down.
 */
$(document).on("scroll",function(){
    checkForScroll();
});

var checkForScroll = function(e)
{
    var iScroll = $(document).scrollTop();
    if (iScroll > 1){
        // Disable event binding during animation
        $(document).off("scroll");

        // Animate page back to top
        $("body,html").animate({"scrollTop":"0"},500,function(){
            $(document).on("scroll",checkForScroll);
        });
    }
}

我评估了很多选项并写了这篇博文，包括测试代码。 http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

希望这有帮助，托弗

Answer 2

我假设iOS Safari中有一个错误，它如何处理具有定义宽度/高度的iframe。如果没有定义宽度/高度，它会尝试自动缩放它们以适应其内容，而无需任何滚动。

我发现最好的解决方法是根本不滚动iframe，而是在框架页面内滚动包装div。

以下是一个例子：

<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>

A-file.html：

<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>

Answer 3

这是一个非常繁琐的问题，特别是如果您处于必须使用动态缩放iframe的情况下，在我的情况下使用YouTube iframe API。您无法控制iframe的滚动属性。如果在ios模拟器/ safari调试窗口中修改iframe元素，它甚至不起作用。

我找到的最佳解决方案是使用负定位来移除多余的空白。 Android可能会有不同的结果，因此您必须使用浏览器检测并应用这种方式。

iOS（iPad）上的iframe内容裁剪问题

3 个答案: