解决 iframe 在 iPad和iPhone 上不能滚动的问题

最新推荐文章于 2023-04-27 14:59:49 发布

Abraham_Kevin

最新推荐文章于 2023-04-27 14:59:49 发布

阅读量4.4k

点赞数 1

分类专栏： jsp 前端文章标签： js

jsp 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

解决 iframe 在 iPad 上不能滚动的问题

今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。
但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的大小。设置overflow:hidden都没用。

怎么让ipad safari 中的iframe的内容在固定大小中可滚动？

网上说要用seamless属性。直接写个seamless。但是这个属性ipad的safari不支持。chrome是支持的。

IE6 – Windows: no support
IE7 – Windows: no support
IE8 – Windows – Windows: no support
IE9 beta – Windows: no support
Firefox 3.6 – Windows: no support
Firefox 3.6 – OSX: no support
Firefox 4.0 – beta Windows: no support
Firefox 4.0 – beta OSX: no support
Safari OSX: no support
Chrome 7 – Windows: no support
Chrome 7 – Windows: no support
Chrome 9 – OSX: no support
Opera 11 – OSX: no support

测试例子：
http://www.maxdesign.com.au/jobs/example-seamless/

所以以上方法都无法解决ipad safari中iframe滚动的问题。

解决办法：
在iframe外加一层div，设置样式-webkit-overflow-scrolling:touch; overflow: scroll;
让超出div的内容可以通过touch来滚动。

另外，如果iframe的src不是网址，而是本地的html，则需要给HTML的DOM添加监听事件，让html的body可以监听到touch事件，让嵌套的html也可以滚动。

[javascript]view plain copy
//如果iframe的src不是网址，而是本地的html，则需要给HTML的DOM添加监听事件，让html的body可以监听到touch事件，让嵌套的html也可以滚动。
    var toScrollFrame = function(iFrame, mask) {  
               if (!navigator.userAgent.match(/iPad|iPhone/i))  
                   return false;  
               //如果没有iOS，什么也不做
               var mouseY = 0;  
               var mouseX = 0;  
               jQuery(iFrame).ready(function() {//等待iFrame加载  
                   //记忆初始拖曳运动 
                   jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {  
                       mouseY = e.targetTouches[0].pageY;  
                       mouseX = e.targetTouches[0].pageX;  
                   });  


                   //基于初始拖动位置更新滚动位置 
                   jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {  
                       e.preventDefault();  
                       //防止整页拖动  


                       var box = jQuery(mask);  
                       box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);  
                       box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);  
                       //MUSEX和MouSe不需要定期更新，因为当前位置  
                       //因为鼠标相对于Tr.IFRAMY的当前位置随着掩码滚动而改变。.  
                   });  
               });  
               return true;  
           };  
           toScrollFrame('.myFrame', '.myMask');  
           
           

最终代码

[html]view plain copy
<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <title>wrapScroller demo</title>  
        <link rel="stylesheet" href="../style/wrapScroller.css" type="text/css" media="screen" />  
        <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>  
        <script type="text/javascript">  
              
        </script>  
    </head>  
    <body style="background: #ccc;">  
        <div>  
            HEADER - use 2 fingers to scroll contents:  
        </div>  
        <div id="scrollee" style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">  
            <iframe id="object" height="90%" width="100%" type="text/html" src="http://en.wikipedia.org/"></iframe>  
        </div>  
    </body>  
</html>  

Abraham_Kevin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
解决 iframe 在 iPad和iPhone 上不能滚动的问题

解决 iframe 在 iPad 上不能滚动的问题今天要在web中嵌套一个网址或本地HTML，用到了iframe，在电脑上设置scrolling=‘auto’，宽度高度，会有滚动条出现。而在ipad上会全部显示整个网页的宽度高度。scrolling属性无效。原来在html5中的iframe已经只有剩下src的属性。但是若设置scrolling=‘no’.还是会生效的。页面只显示定义的高度和宽度的...
复制链接

扫一扫