基于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) {});
});