今 天要在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也可以滚动。

    var toScrollFrame = function(iFrame, mask) {  if (!navigator.userAgent.match(/iPad|iPhone/i))  return false;  //do nothing if not iOS devie  var mouseY = 0;  var mouseX = 0;  jQuery(iFrame).ready(function() {//wait for iFrame to load  //remeber initial drag motition  jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {  mouseY = e.targetTouches[0].pageY;  mouseX = e.targetTouches[0].pageX;  });  //update scroll position based on initial drag position  jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {  e.preventDefault();  //prevent whole page dragging  var box = jQuery(mask);  box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);  box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);  //mouseX and mouseY don't need periodic updating, because the current position  //of the mouse relative to th iFrame changes as the mask scrolls it.  });  });  return true;  };  toScrollFrame('.myFrame', '.myMask');

最终代码

    <!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>

参考： 

http://stackoverflow.com/questions/6139564/iframe-size-on-ipad 

http://jsfiddle.net/CobaltBlueDW/zHR8s/ 

http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute

转载于:https://www.cnblogs.com/jsonzheng/p/4023880.html

iframe在ipad safari的显示相关推荐

  1. 轻松进行iPad Safari设置

    推荐 通过iPad Safari设置,iPad中的Safari可以让我们看到我们想看的影片.动画和Web应用程序,关闭部分内容以保护我们的隐私安全和设备安全,至于如何进行iPad Safari设置,下 ...

  2. ipad html兼容问题,如何处理ipad safari CSS 样式的兼容性？_html/css_WEB-ITnose

    如上图[由三个DIV组成的圆角框,中间DIV 两端出现了间隙]主流PC浏览器都能显示正确的效果,唯独IPAD Safari 出现这样的差异.不清楚是什么原因造成的,知道的朋友指教. 以下为布局 Rol ...

  3. pdf注释上锁_如何在iPad上突出显示和注释PDF

    pdf注释上锁 Khamosh Pathak Khamosh Pathak The iPad is a great way to read PDFs, but what if you want to ...

  4. 【Mac】让Safari 书签显示网站 Logo

    这个东西叫 Apple Touch Icon, 是由网站提供的,和 favicon.ico 差不多的性质,理论上来说是不能修改的. 但是!那些说不能改的还需要学习一个,因为显然 Safari 会把这个 ...

  5. android webview iframe 不显示,带有iframe的视频不会显示在Android Webview上

    我正在从其他网站上显示WebView的Android项目(API级别8)上工作,我无法更改这些网站的代码.我在WebView中的某些设备上无法强制GPU渲染(在设置 - >开发人员选项中)中遇到 ...

  6. jQuery的animate()的scrollTop属性在iPad Safari上不起作用

    问题:jQuery的animate()的scrollTop属性在iPad Safari上不起作用 方案: // 在Safari上不起作用,其他浏览器可以 $("html").ani ...

  7. 关于如何让ppt在你的ipad上不显示乱码

    关于如何让pdf在你的ipad上不显示乱码,我也下了一些软件,但大都是收费的,最后找到了简单粗暴的解决办法:用wps将ppt导出为pdf即可,干净又卫生! 前: 后:

  8. JavaScript的运行 safari 中文显示乱码

    文章目录 JavaScript的运行 script 标签 客户端脚本语言 MIME 类型 link 标签 外部样式表 safari 中文显示乱码 div表示什么 JavaScript的运行 在html ...

  9. 让照片在Apple（iphone / iPad）上显示在地图中正确的位置

    太久没来这里了,这两天又在之前批量调整照片日期的那段代码的基础上整了两个程序,拿来分享一下. 上周我买了个牛排,对就是the new iPad.哈哈,从此我可以在这上面得瑟我的照片啦~~ 啦呀啦,想一 ...

最新文章

  1. 【数字孪生】工业互联网和数字孪生
  2. MemberShip驗證
  3. 神经网络---Hessian矩阵
  4. filter2D函数
  5. git代码回滚的几种方式
  6. python爬虫学习：爬虫QQ说说并生成词云图，回忆满满
  7. 阿里巴巴云原生的 2020，注定不凡的一年
  8. APACHE服务器出现No input file specified.的完美解决方案
  9. Linux crond实例
  10. long 和 int 的相互转换
  11. 用SetCapture捕获鼠标消息
  12. Keil MDK5硬件仿真之基本介绍
  13. 2013程序员考证下午题练习
  14. 阿里天池大数据竞赛（杂）
  15. 【Codecs系列】视频编码中的率失真优化RDO技术
  16. Redis高频面试题（欢迎来学习讨论）
  17. 为什么网上都说 AirPods 3 音质不如AirPods Pro？
  18. Invalid property 'driver_class' of bean class
  19. 常见的DNS攻击与防御
  20. 手机在线语音转文字怎么实现？分享两个好办法，详细步骤教你学会

热门文章

  1. [react] 怎样在react中使用innerHTML？
  2. Taro+react开发（80):状态改变的构造函数
  3. 前端学习（3117）：react-hello-react的类中的方法
  4. 前端学习（3047）：vue+element今日头条管理-使用table表格组件
  5. 前端学习（2930）：内嵌改变样式
  6. 工作374-前端margin:0 auto为什么会失效
  7. [vue] 怎么在vue中使用插件？
  8. [vue] vue项目有使用过npm run build --report吗？
  9. [css] 设置字体时为什么建议设置替换字体？
  10. 前端学习（2227）：react之状态二