Javascript iframe关于iOS（iPad）内容裁剪问题_Javascript_Ipad_Iframe_Scroll

Javascript iframe关于iOS（iPad）内容裁剪问题

javascript ipad iframe scroll

Javascript iframe关于iOS（iPad）内容裁剪问题,javascript,ipad,iframe,scroll,Javascript,Ipad,Iframe,Scroll,我正在寻找一种正确的方法，以确保在ipad/iOS5上的iframe中滚动后，动态显示的内容是可见的哦，Iframes和iPad——你是一个多么棒的老车夫啊。我知道： iPad将iFrame扩展到其内容的全部高度（几乎就像使用HTML5的“”属性一样，但由于它不从父级继承样式或事件，所以不完全如此）。奇怪，让很多人讨厌，但却是真的因此，是无用的，因为它根据内容而不是容器来调整大小我需要把我的iframe包成一个div-a-la <div id="wrapper" style="-w

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

哦，Iframes和iPad——你是一个多么棒的老车夫啊。我知道：

iPad将iFrame扩展到其内容的全部高度（几乎就像使用HTML5的“”属性一样，但由于它不从父级继承样式或事件，所以不完全如此）。奇怪，让很多人讨厌，但却是真的
因此，
是无用的，因为它根据内容而不是容器来调整大小

我需要把我的iframe包成一个div-a-la

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


我发现我还可以通过使文档与iframe内容一样高来解决这个问题。（正如建议的那样）但在我的例子中，我不希望用户能够在这个现在很高的应用程序中向下滚动，因为它应该是一个全屏应用程序。我使用此代码来防止垂直滚动：
/*
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);
        });
    }
}

我评估了很多选项并写了这篇博文，包括测试代码。

希望这有帮助，
Topher
我假设iOS safari中存在一个缺陷，即它如何处理具有定义宽度/高度的iFrame。在未定义宽度/高度的情况下，它会尝试自动缩放它们以适应其内容，而无需任何滚动
我发现最好的解决方法是根本不滚动iframe，而是滚动framed-in页面内的包装器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>


…我所有的正常内容。。。
这是一个非常乏味的问题，尤其是在必须使用动态缩放iframe的情况下，在我的例子中是YouTube iframe API。您无法控制iframe的滚动属性。如果在ios simulator/safari调试窗口中修改iframe元素，它甚至不起作用
我发现的最好的解决方案是使用负定位来删除多余的空白。Android可能会有混合的结果，所以您必须使用浏览器检测并以这种方式应用
 你同时找到解决办法了吗？在我的平台上面临着同样的问题……我发现尝试使用XHTML1.1兼容的标记，而不是一个（可以指向文本/html附件，并以类似于iframe的方式显示）包装器对象来正确显示内容（仍然需要触摸和溢出包装器以方便触摸滚动）。试试这个：基本上你根本不想滚动iframe，而是想在framed in页面中添加一个包装器div。你可以在这里尝试解决方案。发布多个问题的复制粘贴样板/逐字回答时要小心，这些问题往往会被社区标记为“垃圾邮件”。如果你这样做的话，通常意味着问题是重复的，所以请将它们标记为重复的。如果这是一个bug，那么不仅仅是Safari。我在Chrome上至少在iPad1上发现了同样的东西。@toon81在iPad上，事实上是iOS设备，苹果禁止第三方浏览器。所以，你看到的Chrome使用的是iOS Safari的Webkit。我很肯定Chrome是第三方浏览器。AppleGrow是对的。iOS上的Chrome仅允许作为Webkit的包装。