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