管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript动态的改变IFrame的高度实现自动伸展

　　动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩

　　原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度

　　具体实现一:

　　1、在IFrame的具体页面(就是子页面)，添加JavaScript

　　

复制代码 代码如下:

　　<script>

　　function IFrameResize(){

　　//alert(this.document.body.scrollHeight); //弹出当前页面的高度

　　var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象

　　//alert(obj.height); //弹出父页面中IFrame中设置的高度

　　obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度

　　}

　　</script>

　　2、在IFrame的具体页面(就是子页面)的body中，添加onload事件

　　

复制代码 代码如下:

　　<body onload="IFrameResize()">

　　3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame

　　

复制代码 代码如下:

　　<IFRAME border=0 marginWidth=0

　　frameSpacing=0 marginHeight=0

　　src="frame1.jsp" frameBorder=0

　　noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

　　具体实现二:

　　

复制代码 代码如下:

　　//动态改变父类iframe的高度

　　//iframe页面调用的js

　　$(function(){

　　//取到窗口的高度

　　var winH = $(window).height();

　　//取到页面的高度

　　var bodyH = $(document).height();

　　if(bodyH > winH){

　　window.parent.document.getElementById("mainFrame").height=bodyH;

　　}else{

　　window.parent.document.getElementById("mainFrame").height=winH;

　　}

　　});

　　父页面的iframe为

　　

复制代码 代码如下:

　　<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

教程首页 更多教程