服务器建网站教程,宁波网络营销推广制作,网站服务器名字,学网站建设需要下载什么这段时间在工作中遇到一个看似较为棘手的问题。问题描述#xff1a;查询报表页面分为上下两部分#xff0c;上部分为条件输入区域#xff0c;下部分为报表展示区域。客户要求做到默认满屏#xff08;但要动态适应不同的窗体大小#xff0c;也就是浏览器窗体用户会手动改变… 这段时间在工作中遇到一个看似较为棘手的问题。问题描述查询报表页面分为上下两部分上部分为条件输入区域下部分为报表展示区域。客户要求做到默认满屏但要动态适应不同的窗体大小也就是浏览器窗体用户会手动改变其大小但上部分条件输入区域有动态变化高度的现象。 在遇到上述问题您是否第一反应就是利用window的onresize事件做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时我们又应该如何呢。是否有统一的处理方案呢。今儿本人就把我自己的想法和测试提供出来供大家参考有疑问或建议欢迎交流和沟通。 一、上代码
闲话少说上代码。首先本人为了处理与IE的兼容性对现代浏览器IE浏览器做了区别对待。然后提供了一个工厂类以供使用。
1.1、 现代浏览器的实现 /**
* 现代浏览器处理方案
*/
function RptAutoHeightForModernBrower(context){
this.context context;
this.$object null;
}
var mPt RptAutoHeightForModernBrower.prototype;
mPt.init function(){
var object document.createElement(iframe), self this; //object在ie11上onload方法不能执行
//区元素绝对定位父级必须是相对定位否则参考到body了四个为0width、height为100%让其宽、高与父级相同pointer-events:none不接受鼠标事件z-index层级最低。
object.onload function(){
var context this;
this.contentDocument.defaultView.addEventListener(resize, function(){
self.context.onResize(context.clientHeight);
});
}
object.setAttribute(style, display:block; position:absolute; border:0px; visibility: hidden; left:0px; right: 0px; top: 0px; bottom: 0px; pointer-events: none; z-index: -1; overflow:hidden; width: 100%; height: 100%; opacity:0;);
//object.type text/html;
object.src about:blank;
this.context.$header.appendChild(object);
this.$object object;
//先触发一次
this.context.onResize(this.context.$header.clientHeight);
//window.resize事件
window.onresize function(){
self.context.onResize(self.context.$header.clientHeight);
}
}
mPt.dispose function(){
this.$object.contentDocument.defaultView.removeEventListener(resize);
this.context.$header.removeChild(this.$object);
} 在此处为了做到兼容IE11因为Ie11不支持attacheEvent方法所以也会被判断为现代浏览器本人创建的DOM不是使用的object而是使用的iframe因为在IE下object的onload事件不能触发而iframe的可能有并且iframe的边框一定要去掉否则影响判断。 1.2、ie浏览器的实现 /**
* ie的处理方案
*/
function RptAutoHeightForIE(context){
this.context context;
}
var iePt RptAutoHeightForIE.prototype;
iePt.init function(){
var self this;
this.context.$header.attachEvent(onresize, function(){
self.context.onResize(window.event.srcElement.clientHeight);
});
this.context.onResize(this.context.$header.clientHeight);
//window.resize事件
window.onresize function(){
self.context.onResize(self.context.$header.clientHeight);
}
}
iePt.dispose function(){
this.context.$header.detachEvent(onresize);
} IE浏览器的实现相对简单因为IE环境下的div天身支持onresize事件。
1.3、工厂类 //处理高度自适应的Factory
function RptAutoHeightFactory(opts){
this.opts opts || {};
this.$wrap this.opts.wrap || document.getElementsByClassName(rpt-wrap)[0];
this.$header this.opts.header || this.$wrap.getElementsByClassName(rpt-header)[0];
this.$cont this.opts.cont || this.$wrap.getElementsByClassName(rpt-cont)[0];
var cxt {
$header: this.$header,
onResize: this.resize()
};
this.diffVal 0;
this.realize document.attachEvent
? new RptAutoHeightForIE(cxt)
: new RptAutoHeightForModernBrower(cxt);
}
var pt RptAutoHeightFactory.prototype;
pt.init function(){
var bTop this.getStyle(this.$header, border-top-width);
var bBottom this.getStyle(this.$header, border-bottom-width);
bTop parseInt(bTop.replace(px, ), 10);
bBottom parseInt(bBottom.replace(px, ), 10);
this.diffVal bTop bBottom;
var bTop this.getStyle(this.$cont, border-top-width);
var bBottom this.getStyle(this.$cont, border-bottom-width);
bTop parseInt(bTop.replace(px, ), 10);
bBottom parseInt(bBottom.replace(px, ), 10);
this.diffVal bTop bBottom;
this.realize.init();
}
pt.resize function(){
var $cont this.$cont, self this;
return function(headerHeight){
var dist self.getMaxHeight() - headerHeight - self.diffVal;
if(dist 1 ){
$cont.style.height dist px; //加单位是为了兼容ie
}
}
}
pt.getHeight function(dom){
var height dom.clientHeight;
return height;
}
pt.getStyle function(dom, key){
if(dom.currentStyle){
return dom.currentStyle[key];
}else if(window.getComputedStyle){
return window.getComputedStyle(dom, null)[key];
}
}
pt.getMaxHeight function(){
return document.documentElement.clientHeight || document.body.clientHeight;
} 此处本人在获取style的属性值使用了getComputedStyle和currentStyle实现的这民是标准的方法。 1.4、这样使用
js代码 var irow 2;
function addRow(){
var parent document.getElementsByClassName(rpt-header)[0];
var p document.createElement(p);
p.innerHTML p添加第 irow 行记录/p;
parent.appendChild(p);
}
var autoHeightFactory new RptAutoHeightFactory();
autoHeightFactory.init(); html代码 div classrpt-wrap
div classrpt-header
button typebutton onclickaddRow()添加/button
p第一行内容/p
/div
div classrpt-cont
/div
/div css代码 html, body{
margin: 0px;
padding: 0px;
height: 100%;
}
.rpt-wrap{
height: inherit;
overflow: hidden;
}
.rpt-header{
border: 1px solid gray;
position: relative;
}
.rpt-cont{
border: 1px solid red;
}
