web前端：iframe在iphone手机上的问题

作者:Dobby- 更新于： 2020-03-26 21:21:55

　　IFRAME是html标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

　　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时，通知父窗体删除二维码。（具体没有尝试过）