iframe自适应高度的简单方法及实例
发布时间：01/15 来源： 浏览：
关键词：
网页制作中经常会用到iframe框架显示内容，但是有些网页的iframe里面的子网页是动态的高度，如果弄不好，就有一部分不会显示，所以就要实现iframe自动适应里面网页的高度，现在我们用简单实用的方法实现iframe自适应高度。
iframe 自适应高度，目前最广泛的实现方式是以 JS 获取 iframe 所载入页面的 body 高度。（在本地 html 文件测试的时候 chrome 会有跨域错误，可以使用 IE 来测试）。其实质就是通过 offsetHeight 或者 scrollHeight 获取到 iframe 内部 body 的高度，再调整 iframe 高度即可。以下是初略形式：
Test.html 源码
| 代码如下 | |
<!DOCTYPE HTML> <html> <head> <title>iframe 自适应高度</title> <meta charset="UTF-8"/> </head> <body> <iframe id="auto" name="auto" src="./Test2.html" width="100%" onload="autoHeight()"></iframe> <script type="text/javascript" charset="utf-8"> function autoHeight(){ var ifr = document.getElementById('auto'); ifr.height = ( ifr.contentDocument && ifr.contentDocument.body.offsetHeight ) || ( ifr.contentWindow.document.body.scrollHeight ); } </script> </body> </html> |
|
Test2.html 源码
| 代码如下 | |
<!DOCTYPE HTML> <html> <head> <title>iframe 自适应高度</title> <meta charset="UTF-8"/> <style type="text/css"> html,body{ margin: 0; padding: 0; } #block{ background-color: red; height: 500px; width: 800px; } </style> </head> <body> <div id="block"> </div> </body> </html> |
|
当然以上只是简单的实现，具体更严谨的计算高度做好使用一些兼容性不错库作为基础。
