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

　　浏览器(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

//移动窗口，会有数值的变化 <div></div> <script> var timer = setInterval(function(){ myDiv.innerHTML = 'left:' + window.screenLeft + ';top:' + window.screenTop; }) myDiv.onclick = function(){ clearInterval(timer); } </script>

结果：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

<div></div> <script> var timer = setInterval(function(){ myDiv.innerHTML = 'left:' + window.screenX + ';top:' + window.screenY; }) myDiv.onclick = function(){ clearInterval(timer); } </script>

结果：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坐标值

<div>点击此处</div> <script> //将窗口移动到(0,0)处 myDiv.onclick = function(){ window.moveTo(0,100); } </script>

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

<div>点击此处</div> <script> //将窗口向下移动100像素 myDiv.onclick = function(){ window.moveBy(0,100); } </script>

窗口大小

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

　　[注意]由于<iframe>本身也有window属性，如果页面中存在框架，那么框架中的innerWidth和innerHeight属性指的是框架本身的innerWidth和innerHeight属性

//chrome返回innerWidth:1920;innerHeight:971 //IE9+返回innerWidth:1536;innerHeight:768 //firefox返回innerWidth:1536;innerHeight:755 //safari返回innerWidth:1536;innerHeight:764 document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight

结果：innerWidth:701;innerHeight:40

　　DOM中的document.documentElement.clientWidth和document.documentElement.clientHeight也可以表示页面大小，与innerWidth和innerHeight返回相同的值

　　[注意]类似地，如果访问框架，这两个属性也指向框架的属性

//chrome返回innerWidth:1920;innerHeight:971 //IE9+返回innerWidth:1536;innerHeight:768 //firefox返回innerWidth:1536;innerHeight:755 //safari返回innerWidth:1536;innerHeight:764 document.body.innerHTML = 'clientWidth:' + document.documentElement.clientWidth + ';clientHeight:' + document.documentElement.clientHeight

结果：clientWidth:701;clientHeight:40

　　虽然这两类属性在电脑端表示同样的值，在移动端却有不同的用途。innerWidth和innerHeight表示的是视觉视口，即用户正在看到的网站的区域；而document.documentElement.clientWidth和clientHeight表示的是布局视口，指CSS布局的尺寸。

【2】调整

　　使用resizeTo()和resizeBy()这两个方法可以用来调整浏览器窗口的大小

　　[注意]只有IE和safari浏览器支持

　　resizeTo()接收两个参数：浏览器窗口的新宽度和新高度

<div>点击此处</div> <script> myDiv.onclick = function(){ //将浏览器窗口大小调整到200,200 window.resizeTo(200,200); } </script>

　　resizeBy()接收两个参数：浏览器新窗口与原窗口的宽度和高度之差

<div>点击此处</div> <script> myDiv.onclick = function(){ //将浏览器窗口宽度减小100 window.resizeBy(-100,0); } </script>

打开窗口