iOS (iPad) 上的 iframe 内容裁剪问题
Posted
技术标签:
【中文标题】iOS (iPad) 上的 iframe 内容裁剪问题【英文标题】：iframe on iOS (iPad) content cropping issue 【发布时间】：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 src="about"blank"></iframe>
</div>
或者引入一些trickery来设置框架的滚动位置（我认为是基于this article中提到的技巧）
我的问题是在 iframe 主体内动态显示的内容（例如 jquery 选项卡、手风琴等）可能会导致浏览器在页面的显示范围内裁剪内容。
例如如果我的“选项卡”大部分位于 iframe 内的可见视口下方，并且我执行两指滚动（或实现单指 scrollTop hack），那么在该内容滚动到视图之后，它的一些内容是以前的未绘制仍然未绘制。再次单击第二个选项卡/返回会使内容看起来好像页面没有绘制屏幕外内容。在此之后，如果我随后向上滚动到页面顶部，则不会在页面开头绘制内容（之前是可见的）。用双指滚动页面向上和向下滚动几次可以解决问题。
我已经阅读了this article，上面说问题已得到解决。但它似乎并没有完全修复；并且仍然无法解决由于您必须将 iframe 包装在 div 中并在该 div 上放置滚动条的问题，桌面浏览器可能显示双滚动条，具体取决于它们如何解释 overflow:auto。
附言我在 iframe 内部和外部都使用 HTML5 样板页面，并具有正确的元视口设置。
【问题讨论】：
你有没有找到任何解决方案？在我正在处理的平台上面临同样的问题...... 我发现尝试使用符合 XHTML1.1 的 试试这个：***.com/questions/10805301/… 基本上你根本不想滚动 iframe，而是在框架页面内滚动一个包装 div。 您可以在这里尝试解决方案***.com/a/18699378/768685 【参考方案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" 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 的包装器。 ***.com/questions/11259152/…【参考方案3】：这是一个非常繁琐的问题，尤其是在您必须使用动态缩放 iframe 的情况下，在我的例子中是 YouTube iframe API。您无法控制 iframe 的滚动属性。如果在 ios 模拟器/safari 调试窗口中修改 iframe 元素，它甚至不起作用。
我发现的最佳解决方案是使用负定位来删除多余的空白。 android 可能有不同的结果，因此您必须使用浏览器检测并以这种方式应用。
【讨论】：
以上是关于iOS (iPad) 上的 iframe 内容裁剪问题的主要内容，如果未能解决你的问题，请参考以下文章
iframe 内容未在 iOs5 iPad/iPhone 的滚动下呈现