动态的改变IFrame的高度实现IFrame自动伸展适应高度_Javascript教程-查字典教程网
动态的改变IFrame的高度实现IFrame自动伸展适应高度
动态的改变IFrame的高度实现IFrame自动伸展适应高度
发布时间:2016-12-30 来源:查字典编辑
摘要:动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩原理:在IFrame子页面一加载的时候,调用父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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类