本文介绍如何使用JavaScript获取浏览器窗口的大小和位置。通过innerWidth和outerWidth区分内容与边框尺寸，针对IE6标准与混杂模式分别采用document.documentElement或body获取尺寸。同时利用screenLeft/screenX及screenTop/screenY兼容不同浏览器获取窗口在屏幕上的坐标位置。
获取浏览器窗口大小
在JavaScript中，可以通过outerWidth和outerHeight属性获取浏览器窗口的整体尺寸，包括边框等外部区域。若需获取窗口内部可视区域的大小（即排除浏览器边框部分），则应使用innerWidth和innerHeight属性。需要注意的是，对于IE6及更早版本的浏览器，必须区分文档处于标准模式还是混杂模式：在标准模式下，应通过document.documentElement.clientWidth和document.documentElement.clientHeight来获取尺寸；而在混杂模式下，则需使用document.body的clientWidth和clientHeight属性。
具体实现代码如下：
(function () {
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
var broswerWidth = window.outerWidth;
var broswerHeight = window.outerHeight;
alert(pageWidth + " " + pageHeight);
alert(broswerWidth + " " + broswerHeight);
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") { //The standard mode
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
})();
获取窗口屏幕位置
获取窗口在屏幕上的位置：在IE、Chrome和Safari浏览器中，可以使用screenLeft和screenTop属性来获取窗口距离屏幕左侧和顶部的坐标。然而，Firefox浏览器不支持这两个属性，因此需要改用screenX和screenY属性来实现相同的功能。
相关代码示例如下：
(function btnFun() {
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft :
window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop :
window.screenY;
alert(leftPos + " " + topPos);
//alert(window.screenLeft+" "+window.screenTop);
})();