Javascript中浏览器窗口的基本操作总结

窗口位置

【1】获取

浏览器(firefox不支持)提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置

在窗口最大化的情况下，运行下列代码时，各个浏览器返回的值并不相同。chrome返回left:0;top:0。而IE则返回left:0;top:56(若有菜单栏，则返回left:0;top:78)，这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。safari则由于自身的bug，返回left:-8;top:-8

//移动窗口，会有数值的变化

结果：left:0;top:93

screenX和screenY属性(IE8-)也提供相同的窗口位置信息

[注意]screenLeft、screenTop、screenX和screenY都是只读属性，修改他们的值，并不会使得窗口发生移动

在窗口最大化的情况下，各个浏览器返回的值依然不相同。firefox返回left:-7;top:-7。chrome依然返回left:0;top:0。而IE9+不论是否显示菜单栏始终返回left:-7;top:-7。safari则由于自身的bug，依然返回left:-8;top:-8

结果：left:0;top:93

兼容

获取窗口位置的兼容写法如下

[注意]由于各浏览器的实现不同，无法在跨浏览器条件下取得精确坐标值

 var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
 console.log(leftPos,topPos); 

【2】移动

使用moveTo()和moveBy()方法可以将窗口精确移动到一个新位置，这两个方法只有IE浏览器支持

moveTo()接收两个参数，分别是新位置的x和y坐标值

点击此处

moveBy()接收两个参数，分别是水平和垂直方向上移动像素数

点击此处

窗口大小

【1】获取

outerWidth和outerHeight属性用于表示浏览器窗口本身的尺寸

[注意]IE8-浏览器不支持

//chrome返回outerWidth:1920;outerHeight:1030
//IE9+和firefox返回outerWidth:1550;outerHeight:838 
//safari返回outerWidth:1552;outerHeight:840
document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight

结果：outerWidth:1440;outerHeight:743

innerWidth和innerHeight属性用于表示页面大小，实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度

[注意]由于