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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

给网站添加好看的底部功能按钮

1725
来自专栏上善若水

010HTML页面加载和解析流程详细介绍

2275
来自专栏快乐八哥

使用jQuery Tools scrollable注意事项

项目开发中一直使用jQuery Tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(spe...

20410
来自专栏守望轩

Visual Studio 2008 每日提示(六)

#051、循环使用剪贴薄里粘贴的不同内容 原文地址:http://blogs.msdn.com/saraford/archive/2007/10/01/did...

34710
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十七)一分钟轻松修改CheckBox、RadioButton、RatingBar、SeekBar样式

总结:通过一个简单的样式定义,即可完成对android原生控件样式的修改,省时省力省资源。赶紧试试吧!

1423
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1762
来自专栏静默虚空的博客

详谈如何定制自己的博客园皮肤

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

4430
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

2126
来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

1072
来自专栏小俊博客

通过JS显示网站运行时间

1554

扫码关注云+社区

领取腾讯云代金券