基於iframe的移動端嵌套

需求描述

上上週接到了新的項目，移動端須要作一個底部有五個導航，點擊不一樣的導航頁面主體顯示不一樣的頁面，其中兩個頁面是本身作，而另外三個頁面是引用另外三個網址，其中兩個網址爲內部項目，另一個爲外部（涉及跨域）。

問題

考慮再三後最省時間成本的就是使用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