博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe在iphone手机上的问题与解决方案
阅读量:4118 次
发布时间:2019-05-25

本文共 923 字,大约阅读时间需要 3 分钟。

来源 | http://www.fly63.com/article/detial/7370

问题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: 0;    left: 0;    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时,通知父窗体删除二维码。(具体没有尝试过)

本文完〜

转载地址:http://gxbpi.baihongyu.com/

你可能感兴趣的文章
【JavaScript 教程】标准库—Date 对象
查看>>
前阿里手淘前端负责人@winter:前端人如何保持竞争力?
查看>>
【JavaScript 教程】面向对象编程——实例对象与 new 命令
查看>>
我在网易做了6年前端,想给求职者4条建议
查看>>
SQL1015N The database is in an inconsistent state. SQLSTATE=55025
查看>>
RQP-DEF-0177
查看>>
Linux查看mac地址
查看>>
Linux修改ip
查看>>
MySQL字段类型的选择与MySQL的查询效率
查看>>
Java的Properties配置文件用法【续】
查看>>
JAVA操作properties文件的代码实例
查看>>
IPS开发手记【一】
查看>>
Java通用字符处理类
查看>>
文件上传时生成“日期+随机数”式文件名前缀的Java代码
查看>>
Java代码检查工具Checkstyle常见输出结果
查看>>
北京十大情人分手圣地
查看>>
Android自动关机代码
查看>>
Android中启动其他Activity并返回结果
查看>>
2009年33所高校被暂停或被限制招生
查看>>
GlassFish 部署及应用入门
查看>>