最近移动前端项目中遇到的两个坑-阿里云开发者社区

开发者社区> 开发与运维> 正文

最近移动前端项目中遇到的两个坑

简介: 尽管要多加避免,但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——其实不一致性的问题还是挺大的。 两个坑都是涉及 iframe 的——iframe 真是不好搞! 事情是这样的,一个内嵌于 iframe 的页面,因为需要从认证接口中返回 token 作为登录凭证,读取接口信息是没问题的,然后需要用 session 把登录信息保存起来。

尽管要多加避免,但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——其实不一致性的问题还是挺大的。

两个坑都是涉及 iframe 的——iframe 真是不好搞!

事情是这样的,一个内嵌于 iframe 的页面,因为需要从认证接口中返回 token 作为登录凭证,读取接口信息是没问题的,然后需要用 session 把登录信息保存起来。奇怪的是,session 无效,就像丢失了一样!脱离了 iframe 就是单独页面的话就没事。而且不是全部手机都这样,高版本安卓和苹果都这样(桌面和某些版本安卓正常)。我们知道一般用 cookies 一对一 session 的,估计 iframe 的 cookie 鉴于更完善的安全机制所以不能像低版本那样“愉快”地使用 cookies。

后来简直与甲方说出了我们“殚精竭虑”,无奈之下,只好使出最笨的方法,通过 url 参数传递认证数据。还好几个页面,加起来也没那么痛苦了……

第二个坑是苹果专属的,Safari 居然不能约束 iframe 内页面的宽度!安卓就 ok。简单说发现嵌入页面在移动端会出现变形,即使你加上

<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes" />

也无效。如果写死一个宽度那么就不能兼容苹果各种屏幕了。于是我居中正文,但有些人又不同意这种不符合美观的做法,于是我用 js 读取屏幕宽度然后写入 document.body.style.width。两行代码搞定,关键是思路。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章