實際項目開發中，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嵌入頁面注意的問題還是很多的，簡單的還好，複雜嵌入請謹慎使用。