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

主要步骤是两步：

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) ;
}
}