基於iframe的移動端嵌套

標籤：ros   需求   清除   全屏   縮小   渲染   擴大   解決   div   

需求描述

上上周接到了新的項目，移動端需要做一個底部有五個導航，點擊不同的導航頁面主體顯示不同的頁面，其中兩個頁面是自己做，而另外三個頁面是引用另外三個網址，其中兩個網址為內部項目，另外一個為外部（涉及跨域）。

問題

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

基於iframe的移動端嵌套