ios下使用iframe遇到的问题

最近在ios下使用iframe遇到一些问题,刚开始是载入后不能滑动,然后是点击首屏以下的按钮或输入框时回闪到页面顶部,这里记录一下解决方法。

不能滑动

通过外层套一个div解决,并且内层外层都要设置overflow

1
2
3
4
<div style="height:100%; -webkit-overflow-scrolling:touch; overflow-y:auto">
<iframe id="iframePage" style="overflow-y:auto; width:100%">
</iframe>
</div>

闪烁问题

在iframe页面加载完成后,获取加载的外部链接的body高度来设置Iframe的高度(注意跨域的话不就不好获取了,我做了一层代理解决跨域问题)

1
2
3
4
5
6
7
var iframePage = document.getElementById("iframePage");
iframePage.onload = function () {
var iframeHeight = $("#iframePage").contents().find("body").height();
//原生使用 iframePage.contentDocument.body.clientHeight 获取高度
$("#iframePage").height(iframeHeight);
//原生使用 iframePage.style.height 设置高度
};