编程 Javascript

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

Posted in Javascript onOctober 12, 2013

动态的改变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动态的改变IFrame的高度实现自动伸展

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一组JS创建和操作表格的函数集合

May 07 Javascript

javascript学习笔记(二) js一些基本概念

Jun 18 Javascript

jquery.ajax的url中传递中文乱码问题的解决方法

Feb 07 Javascript

css+js实现部分区域高亮可编辑遮罩层

Mar 04 Javascript

JQuery each()嵌套使用小结

Apr 18 Javascript

javascript 动态创建表格的2种方法总结

Mar 04 Javascript

从零学习node.js之express入门(六)

Feb 25 Javascript

js从输入框读取内容,比较两个数字的大小方法

Mar 13 Javascript

Angular4学习教程之DOM属性绑定详解

Jan 04 Javascript

JavaScript事件冒泡与事件捕获实例分析

Aug 01 Javascript

浅谈高大上的微信小程序中渲染html内容—技术分享

Oct 25 Javascript

鸿蒙系统中的 JS 开发框架

Sep 18 Javascript

JavaScript var声明变量背后的原理示例解析

Oct 12 #Javascript

原生js操作checkbox用document.getElementById实现

Oct 12 #Javascript

基于jquery的9行js轻松实现tab控件示例

Oct 12 #Javascript

JavaScript对象学习经验整理

Oct 12 #Javascript

js修改input的type属性问题探讨

Oct 12 #Javascript

5秒后跳转到另一个页面的js代码

Oct 12 #Javascript

设置checkbox为只读(readOnly)的两种方式

Oct 11 #Javascript