关于ios,safari和iframe的各种

最近没更新过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被人嫌弃我也是能理解了，虽然不是太能用上的知识，但解决问题的一瞬间还是非常棒的，继续加油吧。