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

最新推荐文章于 2024-08-16 17:17:17 发布

张张张的博客

最新推荐文章于 2024-08-16 17:17:17 发布

阅读量1.5w

点赞数 3

分类专栏： web前端文章标签： iframe的问题

本文链接：https://blog.csdn.net/qq_28292937/article/details/78853921

版权

web前端专栏收录该内容

34 篇文章 2 订阅

订阅专栏

问题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)
}