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

Question

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

哦,Iframes和iPad - 你是多么美妙的老chesnut.我知道:

• iPad将iframe扩展到其中内容的完整高度(几乎就像使用HTML5的" 无缝 "属性一样,但并不完全,因为它不会继承父级的样式或事件).奇怪,对许多人来说很烦人,但却是如此.
• <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>
  

• 或者引进一些挂羊头卖狗肉设置框的滚动位置(我认为这是基于中提到的技巧文章)

我的问题是,iframe主体内部动态显示的内容(例如jquery选项卡,手风琴等)可能会导致浏览器在页面的显示范围内裁剪内容.

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

我读过这篇文章,说明问题已得到解决.但它似乎没有完全修复; 并且仍然没有解决这个问题,因为你必须将你的iframe包装在div中并在该div上放置滚动条,桌面浏览器可能会显示双滚动条,具体取决于它们的解释方式overflow:auto.

ps我在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-if​​rame-on-the-ipad-problem/

希望这有帮助，托弗