菜单 部分 为 父页面,点击之后使用iframe 引入 子页面,最初时 子页面高度 有误,故记录如何如何调整 高度的方法:
结构如下:
<!--主体内容-->
<div class="main" id ="rightMain" >
<iframe frameborder="0" width="100%" height="100%" name="rightFrame" scrolling="no"id="rightFrame"></iframe>
</div>
一:在 父页面设置子页面高度 如下
1:加载时 自动设置高度(根据子页面内容-body)
// 设置高度 加载的过程中 设置
$('#rightFrame').load(function() {
var iframeHeight=$(this).contents().find("body").height();
// alert("height:"+iframeHeight);
$(this).height(iframeHeight+'px');
})
2:点击菜单后 再次设置
function changeSonSize(){
var iframeHeight=$("#rightFrame").contents().find("body").height();
// alert("height:"+iframeHeight);
$("#rightFrame").height(iframeHeight+'px');
}
点击事件后调用:changeSonSize();
二:在子页面设置子页面高度
需要设置的原因是 可能在最初load 子页面时 已经设置了高度,但是 在子页面 操作部分功能后子页面的高度 发生变化,而这时由没有重新设置高度,所以 会发生页面 高度不和谐的现象,那么该如何解决呢? 我给的方案有两个 1.给定 将要高度变化的容器一个高度,这样 在最初加载时就会设定,后面操作就不会改变容器高度;2.再操作完 改变容器高度 时,再重新设定一下子页面(当前页面)的高度,通过调用 父页面的方法即可:
// 改变 页面大小
function changeSize(){
window.parent.changeSonSize();
}
这样就会重新根据子页面内容高度,重新设定了。