基于iframe的移动端嵌套

2023-07-21 12:36:58

需求描述

上上周接到了新的项目，移动端需要做一个底部有五个导航，点击不同的导航页面主体显示不同的页面，其中两个页面是自己做，而另外三个页面是引用另外三个网址，其中两个网址为内部项目，另外一个为外部（涉及跨域）。

问题

考虑再三后最省时间成本的就是使用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

码农公寓