iframe在iphone手机上的问题
问题1:
通过document.addEventListener("scroll",function(){})对页面滚动监听事件进行监听,但ios下$(document).scrollTop()值始终为0,对页面监听无效。
原因:
因为iOS下iframe的高度会根据页面的内容自适应,造成了iframe的高度过高(即iframe的高度>屏幕的高度)。则iframe内部html、body标签即使设置为100%,它的值也是页面所有内容撑开的高度。
解决方法:
将body设置为fixed,宽高设为100%,添加-webkit-overflow-scrolling: touch;在body下写一个div,针对这个div进行scroll监听操作。
html{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body{
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
问题2:ios中点击,通过display=block或.show()显示元素会跳转顶部。
解决方法:将元素设置为visibility:hidden,通过改变值为"visible"显示元素。
问题3:ios微信中,iframe下长按二维码识别不了。
原因:iframe受微信的安全限制,阻止了默认事件,也可能是父子窗口的原因。
解决思路:看其他文章说可以在iframe中的二维码被按下touchstart的时候,将二维码地址推送至父页面。父页面接收到二维码识别的请求,则创建一个不可见的img元素,src为刚刚传输过来的二维码地址,并且二维码置顶铺满整个屏幕。在touchend与touchcancel时,通知父窗体删除二维码。(具体没有尝试过)
iframe在iphone手机上的问题的更多相关文章
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
- 关于iphone手机上点击事件不起作用
今天调试手机端H5页面的时候,发现一个很坑的问题,绑定的点击事件不起效果,安卓上都没问题,事件能正确触发,但是在iPhone没反应. 开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必 ...
- Jquery的$(document).click() 在iphone手机上失效的问题
click事件和 touchstart事件共存 安卓IOS手机都适用 $(document).on("click touchstart", ".demo", f ...
- 禁用iPhone手机浏览器上给电话号码自动加上的link样式
iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话号码的数字 加上link样式. 可以添加下面的meta禁用掉这个功能. // //
- 禁用iPhone手机浏览器上给电话号码自动加上的link样式(苹果手机自动给手机号加样式)
原文地址:http://blog.csdn.net/atec2000/article/details/44631633 iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话 ...
- iphone手机怎么录屏 两种方法任你挑选
iphone手机怎么录屏呢?苹果手机拥有独特的Airlay镜像投屏,AirPlay的工作原理是当iPhone或IPAD与支持AirPlay技术的硬件,比如Apple TV等设备处在同一个wife的情况 ...
- iPhone手机怎么投屏到电脑上
如今生活水平不断上升,人们更加追求高质量.高享受的生活,所以可以利用一切资源提高生活质量,享受更好的生活体验,比如说手机投屏电脑就可以提高我们的视觉体验,所以更多的人去尝试,那么iPhone手机怎么投 ...
- iPhone手机安全指南
摘要:iPhone手机安全指南 - 1.iPhone解锁使用指纹:2.启用“查找我的iPhone”功能:3.Apple ID启用两步验证:4.修改SIM卡PIN码.5.iPhone被盗或丢失后,登录i ...
- 苹果IPhone手机由于更新了IOS7 Beta测试版导致“激活出错”后,如何还原电话本和照片方法
苹果这狗日的,手段果然狠,因为用户提前升级了测试版又没有更新正式版,就突然把手机变砖头,既不让升级正式版,也不让备份手机中的信息,确实有必要这样吗? 我的手机是IPone4s,在看了6月Apple W ...
随机推荐
- 转载 angularJS filter 过滤器
angularjs中的filter(过滤器) 标签: angularjsfilter 源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...
- Shiro权限验证说明
1.简介 shiro是一个安全框架,是Apache的一个子项目.shiro提供了:认证.授权.加密.会话管理.与web集成.缓存等模块. 1.1.模块介绍 Authentication:用户身份识别, ...
- javascript 完全正确的数据库indexedDB
//indexedDB var dbName = 'whx', version = '1', dbTableName = 'bbg', request, db, conCls, updateKey, ...
- VFP控制Excel操作集
◆访问EXCEL:ExcelSheet = GetObject('','Excel.Sheet')返回结果为类,则成功.例:ExcelSheet = GetObject('','Excel.Sheet ...
- 使用docker搭建FastDFS
拉取镜像(使用docker-componse可以忽略) [root@localhost ~]# docker pull phinexdaz/fdfs_tracker [root@localhost ~ ...
- chromedriver和firefox driver的安装过程
环境:ubuntu14.04, python2.7 selenium2.0 文章参考出处:http://blog.csdn.net/heybob/article/details/52922645 ch ...
- [Pyhton]连接MSSQL实例并执行SQL语句
运行环境: 服务器端: MSSQL 2014 Server 2012 R2 程序端: Python 3.7.4 MacOS 10.14.6 CentOS Linux release 7.7.1908 ...
- CVE-2020-0668-Windows服务跟踪中的普通特权升级错误
CVE-2020-0668-Windows服务跟踪中的普通特权升级错误 在这里中,我将讨论在Windows Service跟踪中发现的任意文件移动漏洞.从我的测试来看,它影响了从Vista到10的所有 ...
- Solr系列4-SolrJ开发应用
1: Solr导入 1.1导入POM # Base Code Java org.apache.solr solr-solrj 8.4.0 # spring boot org.springframewo ...
- Sublime text3的安装及python开发环境的搭建
作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...