BOM-不同浏览器对窗口尺寸的获取和修改

窗口的位置和大小

用来确定和修改 window 对象位置的属性和方法有很多。IE、Safari、Opera 和 Chrome
都提供了 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置 。
Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时
支持这两个属性。
//确定窗口的位置,IE 支持
alert(screenLeft); //IE 支持
alert(typeof screenLeft); //IE显示number，不支持的显示undefined
//确定窗口的位置,Firefox 支持
alert(screenX); //Firefox 支持
alert(typeof screenX); //Firefox 显示 number,不支持的同上
PS：screenX 属性 IE 浏览器不认识，直接 alert(screenX)，screenX 会当作一个为声明的
变量，导致不执行。那么必须将它将至为 window 属性才能显示为初始化变量应有的值，所
以应该写成：alert(window.screenX)。

//跨浏览器的方法
var leftX = (typeof screenLeft == ‘number’) ? screenLeft : screenX;
var topY = (typeof screenTop == ‘number’) ? screenTop : screenY;

窗口页面大小，Firefox、Safari、Opera 和 Chrome 均为此提供了 4 个属性：innerWidth
和 innerHeight，返回浏览器窗口本身的尺寸；outerWidth 和 outerHeight，返回浏览器窗口本
身及边框的尺寸。
alert(innerWidth); //页面长度
alert(innerHeight); //页面高度
alert(outerWidth); //页面长度+边框
alert(outerHeight); //页面高度+边框
PS：在 Chrome 中，innerWidth=outerWidth、innerHeight=outerHeight；
PS：IE 没有提供当前浏览器窗口尺寸的属性；不过，
DOM 有提供相关的方法。

在 IE 以及 Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth
和 document.documentElement.clientHeight 中保存了页面窗口的信息。
PS：在 IE6 中，这些属性必须在标准模式下才有效；如果是怪异模式，就必须通过
document.body.clientWidth 和 document.body.clientHeight 取得相同的信息。
//如果是 Firefox 浏览器，直接使用 innerWidth 和 innerHeight

var width = window.innerWidth; //这里要加 window，因为 IE 会无效
var height = window.innerHeight;
if (typeof width != ‘number’) { //如果是 IE，就使用 document
if (document.compatMode == ‘CSS1Compat’) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else {
width = document.body.clientWidth; //非标准模式使用 body
height = document.body.clientHeight;
}
}
PS：以上方法可以通过不同浏览器取得各自的浏览器窗口页面可视部分的大小。
document.compatMode 可以确定页面是否处于标准模式，如果返回 CSS1Compat 即标准模式。

//调整浏览器位置
moveTo(0,0); //IE 有效，移动到 0,0 坐标
moveBy(10,10); //IE 有效，向下和右分别移动 10 像素

//调整浏览器大小
resizeTo(200,200); //IE 有效，调正大小
resizeBy(200,200); //IE 有效，扩展收缩大小
PS：由于此类方法被浏览器禁用较多，用处不大。