标签：统一 color os x created 钩子函数 mat 后台管理 问题 flow
实际项目开发中，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
标签：统一 color os x created 钩子函数 mat 后台管理 问题 flow
原文地址：https://www.cnblogs.com/sichaoyun/p/11535407.html
