解决 iframe 在 iOS 中的高度问题

通常情况下,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 ?