该博文主要是记录在开发过程中使用iframe时遇到问题,收集的解决方法汇总。

iframe移动设备垂直滚动问题

移动开发过程中使用iFrame时,出现在iOS10以上系统出现滚动异常问题,该问题已经有国外大拿提供了解决方案,请看我的另一篇博文《解决iframe嵌入页面在iOS不能滚动问题》

禁止iframe产生历史记录

方式一

url链接变化,不通过改变iframesrc属性,而是每次都创建一个新的iframe指向新的url;

1
2
3
var ifr =  document.createElement('iframe');
ifr.src = 'https://www.jd.com';
document.body.appendChild(ifr);

方式二

通过操作iFramelocation来改变iFrame指向的url;

1
2
var ifr = document.getElementById('ifr');
ifr.contentWindow.location.replace('https://www.jd.com');

iframe页面使用viewport进行页面缩放问题

在移动开发过程中,嵌入的三方页面,使用高清屏页面渲染方案,这时就会出现子页面会超出页面容器放大了,出现该问题,是因为父子容器设置的缩放比不一致导致的。

解决方法

  • 父子容器设置的viewport保持一致即可。
  • 父容器不设置viewport,就不出现父子容器viewport冲突问题。

示例

  • 父容器viewport设置
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  • iframe子页面使用高清屏解决方案,进行页面缩放,如iPhone5;
1
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

iframeiOS部分机型宽度问题

问题描述

iframe嵌入的页面有横向滚动模块,使用了overflow-x: auto;样式,这个时候嵌入页面的宽度会撑大页面,导致iframe出现了横向滚动。

解决方式

1
2
3
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
<iframe src="http://h5.m.taopiaopiao.com" frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
</div>

移动端iframe终极方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.iframe-container{
position: fixed;
top: 0;
left: 0;
z-index: auto;
overflow: auto;
-webkit-overflow-scrolling:touch;
width:100%;
height:100%;
}
.iframe-container iframe{
width: 1px;
*width: 100%;
min-width: 100%;
/*width: 100%;*/
/*height: 100%;*/
}
1
2
<!--height="100%"要写在行内,写在class中不生效-->
<iframe src="https://h5.m.taopiaopiao.com" scrolling='no' frameborder="0" height="100%"></iframe>