页面布局-iframe 高度 自适应问题
2017-07-15 19:40
399 查看
菜单 部分 为 父页面,点击之后使用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();
}
这样就会重新根据子页面内容高度,重新设定了。
结构如下:
<!--主体内容-->
<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();
}
这样就会重新根据子页面内容高度,重新设定了。
相关文章推荐
- Iframe自适应页面高度问题的最简单最适用的解决办法
- iframe 子页面自适应高度问题
- javascript解决iframe框架页面自适应高度问题
- iframe 子页面高度自适应问题
- 关于iframe自适应高度,解决一个iframe动态改变url,改变页面同时解决高度自适应问题
- iframe自适应内层页面高度,可响应页面中折叠点击事件,以及实现跨域的问题解决方案
- Iframe高度自适应问题[子页面控制父页面高度]
- 网页布局中iframe高度自适应问题总结
- EasyUI中iframe嵌入页面,包含datagrid数据动态绑定,页面内容的高度自适应问题
- js中获取当前页面高度,iframe高度赋值问题,body高度初始化赋值
- 零高度 iframe对页面布局的影响
- iframe自适应当前页面高度
- iFrame 跨域高度自适应问题解决
- 关于iframe页面高度自适应的问题
- ExtJs非Iframe框架加载页面实现 解决自适应高度
- iframe 自适应新页面高度
- Javascript:web页面中iframe自适应高度
- JS解决iframe之间通信和自适应高度的问题
- jq_jquer获取iframe的高度根据页面内容自适应
- 解决iframe自适应高度问题