最近没更新过vue的demo和博客,主要原因还是因为手头上有工作,假日也是忙得不行。不过能折腾一下也好,证明自己其实还年轻嘛。

回到正题,我负责的一个项目用的是iframe嵌套页面,bootstrap做UI框架,iframe各种坑我也是早有耳闻,在开始的时候也踩了不少,好在查了不少资料也算是解决了。忽然有一天需求大哥跟我说:兄弟不得了啦,你的页面在iphone上滚动不了,点击也没反应啦。我一下被吓得花枝乱颤:我明明在chrome上面模拟过没问题的啊,拿起旁边UI妹子的肾6一看果然如此,我默默看了一眼chrome的图标:果然实践是检验真理的唯一标准啊。

打开项目一看,点击没反应,嗯,后台大哥用了jquery的双击“dblclick”(后台大哥也负责写一点js),上网一查,果然,iso不支持双击事件,这个比较简单,我写了个检测用户环境的函数:获取navigator.userAgent,然后返回一个字符串,利用正则式匹配对应的关键字(iphone,ipad,iso之类),匹配成功确定是iso环境的话就改用一般的“click”事件,轻松解决了。

最重要的问题是不能滚动页面,这我可是第一次听说,我检查了一遍我没有限制过页面的overflow属性,那应该就是iso本身的问题了,网上查一下,果然很多人都注意到了这个问题,只要在iframe外面套一个控元素,然后添加:-webkit-overflow-scrolling:touch;overflow:auto;到样式里面去就可以了,果然,加上去之后。。。。。。不行!!!应该说是无效,因为我的iframe就是设定宽高都是100%,不存在iframe滚动的问题,需要滚动的是iframe的内容,于是我干脆把这个属性加到iframe的内容里面去,结果成功了,看来这个属性并不限定使用在iframe之外,具体的原理还是需要再花时间研究。

我以为事情告一段落的时候,需求大哥又跟我说:我点开一个tab之后发现整个页面都撑开了!!!我又是一脸黑线,打开项目,仔细检查了整个继承链,保证了每个父元素都是宽度100%,只有最后的子元素有超过屏幕大小的宽度(父元素设置了overflow:auto),平时是隐藏的,点击某个tab之后切换显示,当显示的时候,整个iframe就被撑开了,用chrome看iframe宽度,刚好是子元素的宽度:就是说子元素撑开了iframe,但问题是我设置了overflow了啊,又是一头雾水,无解,又上网找解决办法,不料这个方面的问题比较少,花了比较久的时间,最后,是ios解释iframe的问题,有些情况下overflow会失效,iframe会出现高宽重置的情况,只能在宽度样式属性上添加!important;用最高权限禁止iframe的宽度改变。

虽说花了不少的时间,但最后还是解决了问题,iframe被人嫌弃我也是能理解了,虽然不是太能用上的知识,但解决问题的一瞬间还是非常棒的,继续加油吧。

Logo

前往低代码交流专区

更多推荐