Chinaunix首页 | 论坛 | 博客
  • 博客访问: 308394
  • 博文数量: 128
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1611
  • 用 户 组: 普通用户
  • 注册时间: 2013-08-19 11:49
文章分类

全部博文(128)

文章存档

2018年(2)

2016年(2)

2014年(10)

2013年(114)

我的朋友

分类: Web开发

2013-10-14 11:06:14

动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩
原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面),添加JavaScript
 代码如下:



2、在IFrame的具体页面(就是子页面)的body中,添加onload事件
 代码如下:



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



具体实现二:
 代码如下:

//动态改变父类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为
 代码如下:


阅读(655) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~