iOS (iPad) 上的 iframe 内容裁剪问题答案

【问题标题】：iframe on iOS (iPad) content cropping issueiOS (iPad) 上的 iframe 内容裁剪问题
【发布时间】：2012-03-21 23:19:34
【问题描述】：

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

哦，Iframes 和 iPad - 你真是个了不起的老栗子。我知道：

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 选项卡、手风琴等）可能会导致浏览器在页面的显示范围内裁剪内容。

例如如果我的“选项卡”大部分位于 iframe 内的可见视口下方，并且我执行两指滚动（或实现单指 scrollTop hack），那么在该内容滚动到视图之后，它的一些内容是以前的未绘制仍然未绘制。再次单击第二个选项卡/返回会使内容看起来好像页面没有绘制屏幕外内容。在此之后，如果我随后向上滚动到页面顶部，则不会在页面开头绘制内容（之前是可见的）。用双指滚动页面向上和向下滚动几次可以解决问题。

我已经阅读了this article，上面说问题已得到解决。但它似乎并没有完全修复；并且仍然无法解决由于您必须将 iframe 包装在 div 中并在该 div 上放置滚动条的问题，桌面浏览器可能显示双滚动条，具体取决于它们如何解释 overflow:auto。

附言我在 iframe 内部和外部都使用 HTML5 样板页面，并具有正确的元视口设置。

【问题讨论】：

你有没有找到任何解决方案？在我正在处理的平台上面临同样的问题......
我发现尝试使用符合 XHTML1.1 的
试试这个：stackoverflow.com/questions/10805301/… 基本上你根本不想滚动 iframe，而是在框架页面内滚动一个包装 div。
您可以在这里尝试解决方案stackoverflow.com/a/18699378/768685

标签： javascript ipad iframe scroll

【解决方案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/

希望这会有所帮助，托弗

【讨论】：

在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，则通常意味着问题是重复的，因此请标记它们。

【解决方案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>

【讨论】：

如果这是一个错误，它不仅仅是 Safari。我至少在 iPad 1 上的 Chrome 中发现了同样的东西。
@toon81 在 iPad 上，实际上是 iOS 设备，Apple 禁止第三方浏览器。所以，你看到的 Chrome 使用的是 iOS Safari 的 Webkit。
我很确定 Chrome 是第三方浏览器。
AppleGrew 是对的。 iOS 上的 Chrome 只允许作为 Webkit 的包装器。 stackoverflow.com/questions/11259152/…

【解决方案3】：

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

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

【讨论】：