浏览器窗口变化实时获取window当前大小

来源：互联网发布：汉字注音软件编辑：程序博客网时间：2024/06/05 00:25

主要步骤是两步：
1、获取屏幕尺寸和浏览器文本区域的尺寸
通过window的内置属性(innerwidth和innerheight)、document的内置对象(documentElement和body;对应的属性是clientwidth和clientheight)来获取
主要内容就是如下function：

//----chart尺寸默认值----    var defaultwidth = "240px";    var defaultheight = "100%";    //----panel默认宽度----    var panelwight = "100%";    function _init_followSizeChange(){        //获取显示器屏幕和浏览器inner内容大小        var swidth = screen.width;        var sheight = screen.height;        //alert("显示器屏幕分辨率是:"+swidth+"X"+sheight);        var wwidth = 0;        var wheight = 0;        if(document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight){            wwidth = document.documentElement.clientWidth;            wheight = document.documentElement.clientHeight;        }else if(window.innerWidth && window.innerHeight){            wwidth = window.innerWidth;            wheight = window.innerHeight;        }else if(document.body && document.body.clientWidth && document.body.clientHeight){            wwidth = document.body.clientWidth;            wheight = document.body.clientHeight;        }        //alert("浏览器当前文本区域大小是:"+wwidth+"X"+wheight);        var width = (wwidth-550)/3;  //550是固定文本区域的宽度，要放置3个相同大小的chart，所以除3        if(width >=240 ){   //如果宽度大于chart的默认宽度就均匀分布(百分比会自动适配大小)            //defaultwidth = 100*width/wwidth+"%";            defaultwidth="25%"            panelwight = "100%";        }else{          //否则就使用固定宽度来现实chart  效果就是通过滚动条来浏览全部 保证chart的数据分布的合理性与整体美观性            defaultwidth = "240px";            panelwight = "1000px";        }        //alert("每个chart的显示宽度："+defaultwidth+"  "+"panel宽度是"+panelwight);    }

2、添加浏览器窗口变动事件的响应

 window.onresize = _windowonResize;   //浏览器窗口变动事件        //浏览器窗口尺寸变化 就重新加载下面的内容    function _windowonResize(){        _init_followSizeChange(); //获取size        _init_Panel9();   //再次初始化panel的size        _init_Panel10();           _init_Panel5();        _init_Panel6();        _initdiv();  //再次初始化包含chart的div模块size    }    function _init_Panel5(){        if(!_Panel5){            _Panel5=new mx.containers.Panel({width:panelwight,height:"100px",title:"总览", id:"Panel5"});                        //_HSplit2Area0.addControl(_Panel5);            _Container1.addControl(_Panel5);        }else{            _Panel5.resizeTo(panelwight,"100px");        }            }        function _init_Panel6(){        if(!_Panel6){            _Panel6=new mx.containers.Panel({width:panelwight,height:"70px",title:"容量视图", id:"Panel6"});            //_HSplit2Area1.addControl(_Panel6);            _Container1.addControl(_Panel6);        }else{            _Panel6.resizeTo(panelwight,"70px");        }    }    function _init_Panel9(){        if(!_Panel9){            _Panel9=new mx.containers.Panel({width:panelwight,height:"270px",title:"资源视图",id:"Panel9"});            //_HSplit3Area0.addControl(_Panel9);            _Container1.addControl(_Panel9);        }else{            _Panel9.resizeTo(panelwight,"270px");        }    }        function _init_Panel10(){        if(!_Panel10){            _Panel10=new mx.containers.Panel({width:panelwight,height:"280px",title:"应用视图",id:"Panel10",css:{"background-color":"#F0F0F0"}});                        //_HSplit3Area1.addControl(_Panel10);            _Container1.addControl(_Panel10);        }else{            _Panel10.resizeTo(panelwight,"280px");        }    }    function _initdiv() {        if (!divfixinfochart) {    //如果此div不存在就初始化一个            divfixinfochart = new mx.containers.Container({                        id : "divfixinfochart",                        width : defaultwidth,                        height : defaultheight                    });            _Panel9.addControl(divfixinfochart);        }else{                     //如果存在就不能在初始化了  那样会出现同id的两个div在页面上  通过resizeTo重置chart的宽高            divfixinfochart.resizeTo(defaultwidth, defaultheight);        }        if (!divcountchart) {            divcountchart = new mx.containers.Container({                        id : "divcountchart",                        width : defaultwidth,                        height : defaultheight                    });            _Panel9.addControl(divcountchart);        }else{            divcountchart.resizeTo(defaultwidth, defaultheight);        }        if (!divx86chart) {            divx86chart = new mx.containers.Container({                        id : "divx86chart",                        width : defaultwidth,                        height : defaultheight                    });            _Panel9.addControl(divx86chart);        }else{            divx86chart.resizeTo(defaultwidth, defaultheight) ;        }        if (!divfuwutongji) {            divfuwutongji = new mx.containers.Container({                        id : "divfuwutongji",                        width : defaultwidth,                        height : defaultheight                    });            _Panel10.addControl(divfuwutongji);        }else{            divfuwutongji.resizeTo(defaultwidth, defaultheight) ;        }        if (!divjisuantongji) {            divjisuantongji = new mx.containers.Container({                        id : "divjisuantongji",                        width : defaultwidth,                        height : defaultheight                    });            _Panel10.addControl(divjisuantongji);        }else{            divjisuantongji.resizeTo(defaultwidth, defaultheight) ;        }        if (!divziyuantongji) {            divziyuantongji = new mx.containers.Container({                        id : "divziyuantongji",                        width : defaultwidth,                        height : defaultheight                    });            _Panel10.addControl(divziyuantongji);        }        else{            divziyuantongji.resizeTo(defaultwidth, defaultheight) ;        }    }

0 0