网站首页/技术开发列表/内容

JS代码完成iframe自适应高度

技术开发2023-06-21阅读
编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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代码下载

 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

……

相关阅读