经典的iframe自适应高度重现江湖_html/css_WEB-ITnose

iframe高度自适应

iframe高度自适应是一个很老的话题。html5虽然已经将frame 框架给废弃，但是iframe这个标签还是存在的。假如有同学不了解frame和iframe的区别，可以看我之前的文章： html框架之iframe和frame及frameset的相关属性介绍。

虽然现在iframe在项目中已经很少出现了，但是有些项目迫不得已，还是会用到iframe。近期遇到一个案例，就用到了iframe。

基本案例如下：由于手机浏览器预览PDF不是很好，因此，将手机上预览PDF改成预览html。由于PDF是html生成的。一个10页的PDF，要用10个html来展现，为了达到类似一个PDF的效果。迫不得已在页面中使用了多个iframe来预览这些html页面。

问题：需要这些iframe高度自适应，看起来像是在看一张PDF。因此，又重提iframe自适应高度这个话题。

思路

一、在预览PDF(其实是预览html)，的表层，添加一个覆盖层。提示PDF正在加载中....

二、获取每个Iframe页面高度，并将高度赋值给Iframe。

三、当window.onload时间结束之后，我们将“提示PDF正在加载中....”的动画隐藏。【 关于 load事件不清楚的同学可以看 】

四、此时Iframe的高度已经自适应，看起来就像是预览一个PDF了。

高度自适应代码代码如下：