动态的改变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>
推荐阅读
JS操作Cookies包括(读取添加与删除)
一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie,示例如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ">>>详细阅读
本文标题：动态的改变IFrame的高度实现IFrame自动伸展适应高度
地址：http://www.17bianji.com/kaifa2/JS/22700.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示