javascript - iOS (iPad) 上的 iframe 内容裁剪问题

Question

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

Oh Iframes 和 iPad - 你真是个了不起的老栗子。我知道:

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

• 我需要将我的 iframe 包装在一个 div 中 - 啦啦

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

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

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

附注我在 iframe 内部和外部使用 HTML5 样板页面，并使用正确的元视口(viewport)设置。

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/

希望对您有所帮助， 托弗