文章/答案/技术大牛

发布

社区首页 >问答首页 >解决了在iOS上滚动iframe的问题，但iframe页面显示不完整

问解决了在iOS上滚动iframe的问题，但iframe页面显示不完整
EN

Stack Overflow用户

提问于 2013-01-06 23:35:22

回答 4查看 36.8K关注 0票数 7

我正在尝试在iOS上滚动一个iframe，我成功了，它滚动得很好，参考：

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

但是，所有的解决方案都有一个问题: iframe页面不能完全显示……

我在我的iphone和ipad上测试过，iframe页面显示不稳定。

有什么想法吗？

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script type="text/javascript">
    $(function(){
        if (/iPhone|iPod|iPad/.test(navigator.userAgent))
            $('iframe').wrap(function(){
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'scroll',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
    })
    </script>
    <title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>

html

cordova

iframe

web-applications

jquery-plugins

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-01-09 04:40:05

我发现div结合了“绝对”风格和nicescroll来解决问题。

你必须在iframe加载的页面上加载nicescroll。在同一页中，用div包装所有内容(使用绝对样式)

  #content {   position:absolute; }

使用包装的div内容加载nicescroll。

  $(document).ready(function() {
    $("html").niceScroll("#content"); 
  });

链接到演示页面，这样您就可以检查代码：http://areaaperta.com/nicescroll/demo/iframe6.html

自动地，与iOS原生滚动已经使用，在其他平台上，您可以激活nicescroll。

我在使用iOS 5.1的iPad上进行了测试。

票数 5

Stack Overflow用户

发布于 2013-07-25 22:12:16

这个解决方案有点不靠谱，但在iOS上经过测试并运行良好：

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
    </object>       
</div>

基本上，因为滚动在DIV中工作得很好，所以可以使用object标记嵌入页面代码。问题是，由于同源策略，您无法确定目标页面的尺寸。我发现设置一个巨大的页面大小是完全可行的(没有延迟或断断续续的noticed...just空白)

您可以轻松确定客户端操作系统，只需将此代码添加到iOS设备即可。

票数 6

Stack Overflow用户

发布于 2013-01-07 11:54:57

尝试将-webkit-transform:translate3d(0,0,0)添加到iframe样式和其中的所有元素，以强制硬件加速-应该会减少波动性。

在主页样式中：

iframe {  -webkit-transform:translate3d(0,0,0); }

在iframe风格中：

p { -webkit-transform:translate3d(0,0,0); }

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14183647

复制

相似问题

问解决了在iOS上滚动iframe的问题，但iframe页面显示不完整
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问解决了在iOS上滚动iframe的问题，但iframe页面显示不完整EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问解决了在iOS上滚动iframe的问题，但iframe页面显示不完整
EN