基于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

上一篇:webIDE 第二篇博文


下一篇:(NO.00005)iOS实现炸弹人游戏(六):游戏数据的初始化(三)