本文参考了 作者 十一路客 的文章:https://blog.csdn.net/xyr05288/article/details/46416059,非常感谢作者的分享。
业务场景:
后台管理功能的jsp页面采用的iframe嵌套的页面结构,子页面中有数据列表等通过ajax加载的动态数据。
出现问题:
子页面的高度设置为100%,但是实际取的是当前页面的可见高度或者父页面的高度,如果子页面的高度大于父页面的高度,会出现滚动条,这样父页面和子页面各有一个滚动条,看起来实在是不美观,操作也繁琐。
解决方法:
在父页面写个方法
function changeHeight(height){
//改变装iframe的容器div的高度
$("#child_frame").css("height",height);
}
子页面需要引入一个js文件,详见附件,该js文件是从上面的参考文章中拿的,再次感谢作者。
子页面初始化需要写如下js代码:
$(document).ready(function(){
$("body").fadeIn(); //防止出现界面一闪的情况,界面默认是隐藏的,此时显示
changePH();
$("body").resize(function() { //body变化时执行
changePH();
});
$.ajaxSetup({
beforeSend : function() {
},
complete : function() { //ajax请求完成后执行
changePH();
},
error : function(xhr, type) {
}
});
});
//调用父级页面方法,修改父级页面的高度
function changePH(){
if(window.frameElement.src.indexOf("toStudyCourseList") != -1){
if(!($(window.frameElement.parentElement).css("display") == "none")){
var height = $('body')[0].scrollHeight;
window.parent.changeHeight($(window.frameElement.parentElement),height);
}
}else{
if(!($(window.frameElement.parentElement.parentElement).css("display") == "none")){
var height = $('body')[0].scrollHeight;
window.parent.changeHeight($(window.frameElement.parentElement),height);
}
}
}
相关推荐
vue终极解决多个页面Echart随页面窗口大小而改变图形大小
主要介绍了Android中的webview监听每次URL变化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/...
在我们开发中,经常用到评论等功能,在下方一个TextField,但是弹出键盘,评论框也要弹起,这时候要监听高度,本代码可完美实现此功能
后,该div在页面展示时就拥有了接收输入的能力,同时因为div块状元素的特性,内容在超出宽度时就会换行导致div高度被撑开,如果内容被删除,高度还会自动回复。最
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度,现通过样式和布局实现高度自适应不设定高度
主要介绍了jquery实现动态改变div宽度和高度,效果非常不错,而且兼容性也很好,有需要的小伙伴可以参考下。
今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出。但是又不知道...
在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ …….}; 但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以...
主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下
页面头部标题一开始是透明状态,,随着屏幕滚动,颜色慢慢变深,到一定高度停止变化 给window 绑定滚动事件,获取当前滚动的高度 当前高度 * 最大透明度 / 停止变色高度 = 透明度 // 标题颜色改变 var banner = ...
不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!
在CSS中添加如下代码: 复制代码代码如下: html,body{ overflow-y:... min-height:101%;...} 已经试验过了,是可以执行的。由此可以得出结论:这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的。
主要介绍了Angular2监听页面大小变化的解决方法,需要的朋友可以参考下
让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。...
主要介绍了VUE实时监听元素距离顶部高度的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that = this [removed] = () => { return ...
在CSS中添加如下代码: 复制代码代码如下: html,body{ overflow-y:... min-height:101%;...} 已经试验过了,是可以执行的。由此可以得出结论:这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的。
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 (这种方法是可以在图片...