iframe踩坑之旅

使用前景

前段时间有个需求，要求在移动端嵌入别的商城页面。由于牵扯原生app的功能，选择使用了iframe嵌入。此刻，就是噩梦的开始。

问题

本项目页面暂且叫他父页面，嵌入页面为子页面。子页面中存在fixed定位的返回按钮。 在ios下返回按钮不是悬浮在窗口底部，而是呈现出absolute的类似效果。滚动到页面底部才展示返回按钮。

原因

经过百度后发现，ios会选择扩展iframe高度来自适应其中页面内容的高度，当页面内容超过iframe设置高度时，ios会直接扩展iframe高度，安卓则会维持iframe高度并右侧展示滚动条，由于fixed是相对于浏览器窗口进行定位，iframe中fixed是相对于iframe窗口进行定位，iframe类似与创建了一个浏览器窗口，在使用一些获取鼠标位置以及元素位置时把iframe当作浏览器窗口处理。

方法

设置子页面body高度为100%，子页面内容展示区域及外层div高度都设置为100%，并且展示区域div超出时滚动。这样就能保证子页面的高度不会超过一屏。iframe嵌套后页面高度也是浏览器窗口高度。