专栏首页calmound基于iframe的移动端嵌套

基于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 条评论
登录 后参与评论

相关文章

  • struts2+Hibernate实现用户登陆功能

    实现的功能,在登陆页面输入Username和PassWord后,将username和password通过Hibernate匹对数据库是否含有一样的usernam...

    用户1624346
  • Poj 3286 How many 0's?

    http://poj.org/problem?id=3286​ 题意:计算从[a,b]期间中总共有多少个0。 思路:比如1234,我们计算1到1234总共出现了...

    用户1624346
  • Roman to Integer

    问题:罗马数字变为整数 class Solution { public: int romanToInt(string s) { cha...

    用户1624346
  • 8大前端安全问题(上) | 洞见

    当我们说“前端安全问题”的时候,我们在说什么 “安全”是个很大的话题,各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话,那么所有...

    ThoughtWorks
  • iframe 解析

    简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

    郑小超.
  • 深入理解iframe

    iframe 用于在页面内显示页面,使用 <iframe> 会创建包含另外一个文档的内联框架(即行内框架)

    Leophen
  • 根据获取内部元素的高度,设置iframe的高度

    德顺
  • 网页内容加速黑科技趣谈

    数周前,在伦敦 Heathrow 机场等飞机的空闲中,我顺便处理了一些工作上的事情。不经意间发现 Github 在性能方面的一些问题,颇为诧异。通过新 tab ...

    疯狂的技术宅
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 动态创建iframe标签页并监控其加载成功(onload)的事件

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券