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

rush:js;"> //移动窗口，会有数值的变化

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

rush:js;">

结果：

left:0;top:93

兼容

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

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

rush:js;"> 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坐标值

rush:js;">

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

rush:js;">

窗口大小

【1】获取

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

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

rush:js;"> //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属性用于表示页面大小，实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度

　　[注意]由于