解决 iframe 在 iOS 中的高度问题

Bios Sun -

通常情况下，iframe 的尺寸由父页面进行控制，在 iframe 内打开的子页面只能在这个限定的区域内显示内容，而几乎所有浏览器也都是按照这种方式去实现的。但在 iOS 系统中，iframe 的高度却与此有了很大出入：如果 iframe 的高度小于其内容高度，则会强制拉高 iframe 以适应内容高度，且父页面没有任何手段控制这个行为。

这会为子页面带来很多问题，比如子页面无法滚动且无法监听到任何滚动事件，定位元素无法正常定位等。虽然不知道 Apple 为什么要这么做，但当我们真的需要在页面中打开一个 iframe 时（比如在一个单页面电商应用中打开一个专题页），这会为我们带来不少的麻烦。

因为 iOS 中没有提供任何手段让我们关闭这个机制，所以我们只能通过一些 hack 的方式绕过它，目前有两种方案可供使用，一种需要修改在 iframe 中所打开的子页面，如果你可以修改它，那么接着看下去；另外一种是在父页面中进行一些调整，可以直接跳到下一章节去看，虽然该方案并不能完全解决问题。

子页面对 iframe 做兼容处理

该方案需要在子页面的 body 元素内添加一个标签，并将该页面内的所有内容移到该标签内：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Subpage</title>
    </head>
    <body>
        <div id="page">
            Subpage Content ...
        </div>
    </body>
</html>

并应用如下样式：

html, body, #page {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#page {
    width: 1px;
    min-width: 100%;
}

这会带来一些额外的麻烦，比如监听页面滚动时需要改为在 #page 元素上绑定滚动事件，而不再是在 window 上绑定。

不过无论如何，这总是最好的方案，因为你想要的任何东西都还可以实现，只是更麻烦了一点而已。

父页面对 iframe 做兼容处理

在子页面中做兼容处理是要有个前提的，就是你得能修改子页面。

如果你要在 iframe 中加载一个第三方页面，而这个页面还没有对自己将要被放在一个 iframe 中做任何准备，那要怎么办呢？

很简单，不要这么做！！！这种时候，最好老老实实地在当前页签内打开第三方页面，并在用户回来后好好地重现现场。因为起码，这是一个稳妥的方案。

当然，如果你要打开的子页面就只是一个普通的页面，比如文章页，它里面没有滚动监听，也没有相对视口依靠，那么如果你非要在 iframe 中打开它，也不是不可以。

很简单，把 iframe 放入一个限定宽高的 div 元素中，让其在这个 div 中滚动就是了：

<div class="wrap">
    <iframe src="http://a-page.com"></iframe>
</div>
.wrap {
    width: 100%;
    height: 300px; /* or other values */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

不过这种方案不好，非常不好。它的限制性太强，而你又完全无法控制你所嵌入的那个第三方页面，你不会知道什么时候它会做出一引发问题的改动。这就好像在你的页面中埋下了一颗地雷。

总结

最后，那就要多问一句了：为什么你非要用 iframe ？