山海科技发展网

08月04日科技常识:iframe在iphone手机上的问题

导读 摘要 今天小编跟大家讲解下有关iframe在iphone手机上的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关iframe在iphone...
摘要 今天小编跟大家讲解下有关iframe在iphone手机上的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关iframe在iphone手机上

今天小编跟大家讲解下有关iframe在iphone手机上的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关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: 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时 通知父窗体删除二维码。(具体没有尝试过)

来源:爱蒂网