当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS代码实现iframe自适应高度

JS代码实现iframe自适应高度

2012/10/25 11:28:14作者:佚名来源:网络

移动端

【实例名称】

JS代码实现iframe自适应高度

【实例描述】

iframe框架可以动态加载网页,并能嵌入到当前页面中,实现页面嵌套的功能。为了更好地显示子页,本例学习如何自动调整iframe的高度。

【实例代码】

 <html> <head> <title>iframe自适应网页-学无忧(www.xue51.com)</title> <script type="text/javascript"> //自动调整iframe框架的方法 function iframeAuto() { try { if(window!=parent) { //定位需要调整的frame框架(在父级窗口中查找) var a = parent.document.getElementsByTagName("IFRAME"); for(var i=0; i<a.length; i++) { if(a[i].contentWindow==window) { var h1=0, h2=0; a[i].parentNode.style.height = a[i].offsetHeight +"px"; a[i].style.height = "10px";   //首先设置高度为10px,后面会修改 if(document.documentElement&&document.documentElement.scrollHeight) { h1=document.documentElement.scrollHeight; } if(document.body) h2=document.body.scrollHeight; var h=Math.max(h1, h2);      //取两者中的最大值 if(document.all) {h += 4;} if(window.opera) {h += 1;} //调整框架的大小 a[i].style.height = a[i].parentNode.style.height = h +"px"; } } } } catch (ex){} } //事件绑定的方法,支持IE5以上版本 if(window.attachEvent) { window.attachEvent("onload", iframeAuto); } else if(window.addEventListener) { window.addEventListener('load', iframeAuto, false); } //--> </script> </head> <body> <table border="1" width="200" style="height: 400px; background-color: gray"> <tr> <td>iframe 自适应其加载的网页</td> </tr> </table> </body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点有如何获取父级页面中的iframe、如何实现iframe的自动调整。获取父级页面中的iflame,主要依靠“parent,document,getElementsBylhgName(”IFRAME”);”语句,其中的“parent”便是获取的父级窗口。自动调整功能实现是将调整方法绑定到onload事件中,即窗体一加载便调整iflame的大小。

【源码下载】

本实例JS代码下载