iframe ios中h5页面 样式变大

Posted 2020-11-13 实现丰盛

实际项目开发中，iframe在移动设备中使用问题还是很大的，说一说我的那些iframe坑

  做过的这个后台管理框架，最开始的需求是PC，但随着业务需要，需要将项目兼容到ipad，后台的框架也是使用的开源框架开发，使用的是iframe嵌套页面的方式

1、内部嵌入iframe，里面的内容页面中有绝对定位的元素，会有问题！

 

现象：项目中嵌入 <iframe /> 并设置宽高后，发现在 android 手机浏览器上打开可以正常运行，但是在 ios 手机上会有 iframe 页面样式莫名变大，效果如下：

经过各种尝试以及找了很多资料，最后终于找到一个完美解决的办法，感谢 <不靠谱的人> 采取了他的方案后，很漂亮的解决了这个bug......

代码如下：

<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">　
 
　　<iframe v-if="type" :src="outurl" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
　　<iframe v-else :src="outurl" frameborder="0" height="100%" scrolling=\'no\' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
</div>  // 这种放大也可能是轮播外侧没有嵌套一层标签所致，手机单独浏览没有问题，如果嵌入iframe ios手机就会出现

再测发现ios android 受到scrolling="no"影响，需要判断一下设备类型，在data里面定义一个type变量，created钩子函数里面执行这个代码判断如何显示就ok了

var u = navigator.userAgent;
var isAndroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Adr\') > -1; //android终端
// var isiOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// console.log(\'是否是Android：\'+isAndroid);
// console.log(\'是否是iOS：\'+isiOS);
if(isAndroid){
　　this.type = true
}else{
　　this.type = false
}

因为嵌入的页面不统一，发现使用如上的方法仍然导致部分页面或多或少的出现问题，后来我将提供嵌入的页面，每一个都做了测试，发现内部页面会不能正常显示，除了外部的布局外，内部的页面布局也会有影响，需要同时做修改，否则页面无法达到需求标准，最终功能并没有上线，不过可以总结出：移动端frame嵌入页面注意的问题还是很多的，简单的还好，复杂嵌入请谨慎使用。

出自： https://www.cnblogs.com/lisaShare/p/9720092.html