需求描述
上上周接到了新的項目，移動端需要做一個底部有五個導航，點擊不同的導航頁面主體顯示不同的頁面，其中兩個頁面是自己做，而另外三個頁面是引用另外三個網址，其中兩個網址為內部項目，另外一個為外部（涉及跨域）。
問題
考慮再三后最省時間成本的就是使用iframe，雖然在移動端使用，我的內心是很拒絕的，不過其他方案調研了下都不太符合現狀。每點擊一次加載一個新的iframe，比較懶，所以兩個新頁面也做成了iframe，在做的過程中出現了如下問題，這里總結一下：
1.嵌入的iframe頁面無法滾動
2.meta元素的ontent不一致，外部的頁面使用width=device-width,而引用的其中一個頁面的width=640，這導致那個頁面渲染的時候無法全屏縮小
3.ios下其中的一個頁面莫名其妙的擴大
4.iframe的頁面a標簽的錨點失效
5.當我點擊a加載了a的iframe頁面，在切換到b，這個時候b頁面字體莫名的變大
6.導航欄有個樣式要求，active的時候icon是為紅色的icon，其他狀態下則為灰色的。其中的一個需求為返回的時候從哪里點出去返回到哪里
7.某個安卓機后返回無法重新加載iframe
解決
聲明嵌入的iframe頁面其中4個都是內部項目，同源的，所以大部分處理的問題不存在跨域問題。
1.嵌入的iframe頁面無法滾動
在iframe外層包裹一個div,然后將其設置為可滾動
<div style="webkit-overflow-scrolling: touch;overflow-y: scroll;">
<iframe></iframe>
</div>
並且在禁止瀏覽器的默認行為，不然類似於微信滑動到底部的時候會和回彈的效果進行沖突
$('body').on('touchmove',function(e){
e.preventDefault();
});
2.meta元素的ontent不一致
這個暫時沒有好辦法，iframe渲染的meta也是默認走的最上層的meta，所以他自己的內部meta是失效的，由於該項目屬於自己部門，有權限可以修改代碼，所以最后我重新設置該頁面的meta，重寫了這個頁面的樣式。
3.ios下其中的一個頁面莫名其妙的擴大
經排查我發現對於標題這類的設置了white-space:nowrap, 以及iframe頁面用了swiper設置的寬度為100%,而移動端為了自適應body也設置的為100%這種情況下，ios下iframe而里面的頁面會擴大。
我的解決辦法是在原項目下頁面html,body依舊設置為100%，而初始化的時候js獲取屏幕的寬度再設置body的寬度。
4.iframe的頁面a標簽的錨點失效
若iframe不涉及跨域，網上有兼容代碼可以重新設置a標簽，跨域解決不了，因為跨域的情況下，外部頁面是無法獲取到iframe下的元素的，最后這個導航做了外部跳轉。
5.iframe頁面切換的時候，切換后的頁面樣式莫名變大
之前我做頁面切換，是用過不重新加載iframe,而是直接修改了iframe的url，但是好像在這種情況下，可能之前上一個頁面加載的css沒有完全清除掉，所以導致css混亂。所以最后每次切換的時候，豆漿iframe給remove掉，在append加載新的iframe。
6.頁面點擊跳轉之后，返回的狀態標記
使用了localStorage記錄了url，navIndex
7.某個安卓機后返回無法重新加載iframe
返回后再append的iframe的代碼下再讓其重新渲染下
$("#iframe").attr("src",url).ready()
8.其他
獲取iframe內部元素
document.getElementById('iframe').onload = function(){
let doc = document.getElementById('iframe').contentDocument;
}
中間涉及到了跨域請求，但是由於后台接口之前就寫了，無法修改接口，但是傳過來的時候中文亂碼
接口默認的解析為gbk，所以需要設置scriptCharset: 'gbk',
$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "data_callback",
contentType: "application/x-javascript,charset-type=gbk",
scriptCharset: 'gbk',
crossDomain: true,
success: function (json) {});
});
我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan