Use js small class library to obtain browser height and width information_javascript skills

Therefore, when the user clicks a button in a webpage with long content to display the DIV layer, they will find that there is no effect (in fact, it is already displayed at the top of the page). Therefore, we need to prepare information about the user's current browsing location. Before implementing this requirement, let's first take a look at what tools we can use in js:

The width of the visible area of ​​the web page: document.body.clientWidth;
The height of the visible area of ​​the web page: document.body.clientHeight;
The width of the visible area of ​​the web page: document.body.offsetWidth " (including the width of the edges and scroll bars )";
The height of the visible area of ​​the webpage: document.body.offsetHeight " (including the width of the edges)";
The width of the full text of the webpage: document.body.scrollWidth;
The height of the full text of the webpage: document.body .scrollHeight;
The height at which the web page is scrolled (ff): document.body.scrollTop;
The height at which the web page is scrolled (ie): document.documentElement.scrollTop;
The left side at which the web page is scrolled ：document.body.scrollLeft;
Top of the main body of the web page: window.screenTop;
Left of the main body of the web page: window.screenLeft;
High screen resolution: window.screen.height;
Screen Resolution width: window.screen.width;
Screen available work area height: window.screen.availHeight;
Screen available work area width: window.screen.availWidth;
Your screen setting is window .screen.colorDepth "Bit color";
Your screen settings window.screen.deviceXDPI "Pixels/inch";

This information comes from the Internet. I went crazy when I saw so many similar concepts. But as a technical person, I still read it tenaciously and made some understanding. After my own understanding and absorption, I felt that I would go crazy every time I wanted to get a height or width information. Therefore, I did some sorting and abstraction of these properties of the browser, according to the three objects like this To peel off so many similar attributes, the first one is the page, the second one is the window, and the third one is the viewport. Take a look at the picture to understand the meaning of my three objects:

Explain these three concepts:

Page: It is an abstraction of the web page we create. Its height is usually higher than the height of our browser, and its width is usually less than or equal to the width of our browser

Browser window: It is an abstraction of the browser we use. It includes menu bar, toolbar, bookmark bar, status bar, page display area, etc. Therefore, its height is definitely greater than or equal to the height of the viewport, and its width is definitely greater than or equal to the width of the viewport

Viewport: It is the area where the page is displayed in the browser

With these three concepts in mind, let’s write a small class library to obtain the height and width of this “object”:

Copy code The code is as follows:

var Browser = {
};
//页面
Browser.Page = (function () {
return {
scrollTop: function () {
return Math.max(document.body.scrollTop, document.documentElement.scrollTop);
},
scrollLeft: function () {
return Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
},
height: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.scrollHeight;
} else {
_height = document.body.scrollHeight;
}
return _height;
},
width: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.scrollWidth;
} else {
_width = document.body.scrollWidth;
}
return _width;
}
};
})();
//窗口：
Browser.Window = (function () {
return {
outerHeight: function () {
var _hei = window.outerHeight;
if (typeof _hei != "number") {
_hei = Browser.ViewPort.outerHeight();
}
return _hei;
},
outerWidth: function () {
var _wid = window.outerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.outerWidth();
}
return _wid;
},
innerHeight: function () {
var _hei = window.innerHeight;
if (typeof _hel != "number") {
_hei = Browser.ViewPort.innerHeight();
}
return _hei;
},
innerWidth: function () {
var _wid = window.innerWidth;
if (typeof _wid != "number") {
_wid = Browser.ViewPort.innerWidth();
}
return _wid;
},
height: function () {
return Browser.Window.innerHeight();
},
width: function () {
return Browser.Window.innerWidth();
}
}
})();
//视口:
Browser.ViewPort = (function () {
return {
innerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.clientHeight;
} else {
_height = document.body.clientHeight;
}
return _height;
},
innerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.clientWidth;
} else {
_width = document.body.clientWidth;
}
return _width;
},
outerHeight: function () {
var _height;
if (document.compatMode == "CSS1Compat") {
_height = document.documentElement.offsetHeight;
} else {
_height = document.body.offsetHeight;
}
return _height;
},
outerWidth: function () {
var _width;
if (document.compatMode == "CSS1Compat") {
_width = document.documentElement.offsetWidth;
} else {
_width = document.body.offsetWidth;
}
return _width;
},
width: function () {
return Browser.ViewPort.innerWidth();
},
height: function () {
return Browser.ViewPort.innerHeight();
}
}
})();

做几点说明：
1、已经能支持获取多浏览器的内部的视口的宽度和高度信息
2、在IE 9中已经和其他的浏览器(Opera、Chrome、FirFox、Safari)一样，已经能支持用window.innerHeight、window.innerWidth、window.outerHeight、window.outerWidth这四个属性获取浏览器的窗口、视口的宽度高度信息,但是IE9以前的IE版本是没有这些属性的，因此在这样的情况下，我将视口和窗口的概念等同起来了。
2、虽然window有宽度和高度信息，但是不一定是真正浏览器窗口的真正的宽度和高度信息。因为有些浏览器返回的结果中就不含菜单栏、工具栏等的高度信息。
实例演示：
在一个垂直内容过多的页面中，使一个DIV总能保持在视口的中心位置(非精确中心位置)：
代码：

复制代码 代码如下:

window.onload = window.onresize = function () {
var top = Math.round(Browser.Page.scrollTop() (Browser.ViewPort.height() / 2) - (parseInt(document.getElementById("divCenter").style.height) / 2));
var left = Math.round(Browser.Page.scrollLeft() (Browser.ViewPort.width() / 2) - (parseInt(document.getElementById("divCenter").style.width) / 2));
document.getElementById("divCenter").style.top = top "px";
document.getElementById("divCenter").style.left = left "px";
}

大家测试时可以采用改变窗口大小的方式来查看。
时间不早了，晚安！
源代码下载查看