解决 iframe 在 iPad 上无法滚动的问题
来源:互联网 发布:qq三国js技能名 编辑:程序博客网 时间:2024/06/02 18:58
昨天用iframe模拟原生应用的webview功能,嵌套一个网址或本地HTML,今天通过测试,在ipad会出现页面无法滚动的问题。iframe的宽高都为屏幕的宽和高,设置属性scrolling=‘auto’,以及样式overflow: auto都没用,而且iframe元素不支持touch事件,在iframe嵌套的网页内部用js实现滚动也不现实。
怎么让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来滚动。
了解更多-webkit-overflow-scrolling
另外,如果iframe的src不是网址,而是本地的html,则需要给HTML的DOM添加监听事件,让html的body可以监听到touch事件,让嵌套的html也可以滚动。
js代码:
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');
html部分代码
<!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>
- 解决 iframe 在 iPad 上无法滚动的问题
- 解决 iframe 在 iPad 上不能滚动的问题
- 解决iPad上的iframe无法触摸滚动
- 解决kindediter中的iframe用ipad访问时无法滚动的问题
- 解决百度地图在iPad和iPhone上无法定位
- 解决iframe滚动条问题
- 解决iframe滚动条问题
- iframe框架套iframe页面滚动条的问题,一切没问题,就差在FF个IE7上测试了~
- iScroll4解决ipad safari浏览器局部div滚动条单手指无法滑动问题
- 解决iframe嵌套frameset出现滚动条失效的问题
- 解决iframe出现两个滚动条的问题
- reactnative 解决listview无法滚动的问题
- 关于app iPad上无法自动翻转的问题
- 解决IPMITool无法在SELS上使用的问题
- 解决FLV视频文件在服务器上无法播放的问题
- 解决VMware在Windows 7上无法上网的问题
- 解决VMware在Windows 7上无法上网的问题
- 解决sublime2在ubuntu上无法输入中文的问题
- vim格式化代码实际上就是 "缩进代码", 命令是等号=
- 第二章 Spring MVC入门 —— 跟开涛学SpringMVC
- java中static{}语句块详解
- Java 框架之Hibernate (三、Hibernate一对多及多对多的关系分析)
- 使用Powerdesigner从sql server数据库生成pdm
- 解决 iframe 在 iPad 上无法滚动的问题
- Hibernate HQL查询 插入 更新(update)实例
- pdb: Using the Python debugger in Django
- 解决瀑布流recyclerview的闪烁移动问题
- Extjs grid中的选择框默认选择时为对号,改为叉号
- Win10 下面PowerShell 运行python2.7
- 在modal viewcontroller外点击屏幕dismiss
- 一个把json数据批量插入SQL SERVER 的Python脚本
- MVC @Html控件 TextBoxFor MVC 控件 加属性