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了。
高度自适应代码代码如下：
登录后复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3118532.html
