当ios遇到iframe出现的问题调研

来源：互联网发布：九九乘法口诀java运算编辑：程序博客网时间：2024/06/03 15:01

问题1.iframe父类元素显示bug:公司H5项目,移动端H5接入iframe引入其他公司开发好的H5链接页面,ios和安卓出现不一样的显示bug,即定于iframe父类外面的topbar在ios不显示,但是在安卓里面就没问题.

原因:初步觉得是iframe在ios中默认自动打开了新页面显示,但是具体解决方法还没有......

问题2.滚动条失效:iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。

index.html

<style>　　 #iframe{height:500px;} </style> <div id="content">  <iframe frameborder="0" src="iframe.html" id="iframe"></iframe></div>

iframe.html

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>IOS frame 滚动条 demo</title></head><body><div class="container">  我是一堆很长。很长，很高，很高的内容。</div><script src="../jquery.js"></script></body></html>

问题原因:在ios中,iframe内部html中的滚动条无法生效

解决方法:把iframe中body里的内容全部包裹一层，然后设置包裹这一层的height，使用属性-webkit-overflow-scrolling:touch;overflow:auto;

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>IOS frame 滚动条 demo</title></head><body><style>#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}</style><div class="container">  我是一堆很长。很长，很高，很高的内容。</div><script src="../jquery.js"></script><script>  var UA = navigator.userAgent;  var forIOS = function(){    if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;}    if($('#wrapper').length){return;}    $('body').children().not('script').wrapAll('<div id="wrapper"></div>');  }();</script></body></html>

问题3:iframe内弹窗问题

问题描述:大概问题是ios对iframe嵌套页面的高度和定位控制失效!具体情况是当嵌套的子页面的高度大于父页面的高度,且子页面中触发弹窗事件时,这时候如果子页面高度远远高于父类页面的高度,就会出现弹窗找不到的情况,其实可能是在视口下面,但是弹窗的位置只是点对于子页面定位的,并没有对于父类视口定位!

解决方法:在chrome浏览器中用浏览器自带的移动端模拟器测试显示直接获取iframe中的元素进行修改样式可以做到,但是如果iframe中再有其他二级页面跳转,则获取不到二级页面中的元素.获取方法:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();

问题4: iframe嵌入后,ios不支持position:fixed属性

需求是在页面最下面有一个按钮,代码写的是 position:fixed;bottom:0;就是把这个按钮固定在页面的最下面,不能随着屏幕滚动而滚动,尝试在pc和安卓手机都是可以的,但是在ios中不行,该按钮直接定位到了内容的最下面,!经过测试发现,ios对iframe的position:fixed不支持.

解决方法:测试之后发现对body设置一个固定值,body{height:600px;overfliw-y:auto};这样可以解决按钮永远在下面的问题,但是会出现滚动条需要隐藏!

补充:如果遇到是移动端嵌套iframe,建议在mata标签中加上:

<meta name="viewport" content="width=device-width,initial-scale=2.0 ,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

在移动端引入iframe的时候建议判断一下是安卓还是ios:

let ifram = document.getElementById('ifram');if (navigator.userAgent.match(/iPad|iPhone/i)) {  let iframe_box = document.getElementById('iframe-box');  iframe_box.style.width = 100 + '%';  iframe_box.style.overflowX = 'hidden';  iframe_box.style.overflowY = 'scroll';  iframe_box.style.webkitOverflowScrolling = 'touch';  ifram.setAttribute('scrolling', 'no');  iframe_box.appendChild(ifram)}

阅读全文

0 0