iframe ios中h5页面 样式变大

时间：2023-03-08 17:40:23

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

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

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

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

iframe ios中h5页面 样式变大

经过各种尝试以及找了很多资料，最后终于找到一个完美解决的办法，感谢 <不靠谱的人> 采取了他的方案后，很漂亮的解决了这个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嵌入页面注意的问题还是很多的，简单的还好，复杂嵌入请谨慎使用。

相关文章