本文共 3217 字，大约阅读时间需要 10 分钟。

控制窗口位置

使用window对象的screenLeft和screenTop属性可以读取或设置窗口的位置，即相对于屏幕左边和上边的位置。IE、Opera和Chrome都支持这两个属性。Firefox支持使用window对象的screenX和screenY属性进行相同的操作，Safari和Chrome也同时支持这两个属性。

示例：跨浏览器获取窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;			var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;			document.write("leftPos:" + leftPos + " topPos:" + topPos);

移动窗口： 使用window对象的moveTo()和moveBy()方法可以将窗口精确的移动到一个新的位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和y坐标，而moveBy()接收的是在水平和垂直方向上移动的像素数。

示例：

window.moveTo(0, 0);//移动到左上角window.moveBy(0,100);//向下移动100像素window.moveTo(200, 300);//移动到200，300的新位置window.moveBy(-50, 0);//左移50像素

$注意：这两个方法可能会被浏览器禁用。另外，这两个方法都不适用于框架，仅适用于最外层的window对象...$

控制窗口大小

使用window对象的innerWidth、innerHeight、outerWidth、outerHeight这四个属性可以确定窗口大小。IE9+、Safari、Opera和Chrome都支持这4个属性。

在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸；在Opera中，outerWidth和outerHeight返回视图容器的大小。innerWidth和innerHeight表示页面视图的大小，去掉边框的宽度。在Chrome中，innerWidth、innerHeight、outerWidth、outerHeight返回相同的值，即视图的大小。

注意：

IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性，主要通过DOM提供页面可见区域的相关信息。

在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视图的信息。在IE6中，这些属性必须在标准模式下才有效，对于怪异模式下的Chrome，则无论通过document.documentElement,还是document.body中的clientWidth和clientHeight属性，都可以取得视图大小。

示例：取得页面视图的大小

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;if (typeof pageWidth != "number"){
   	if(document.compatMode == "CSS1Compat"){
   		pageWidth = document.documentElement.clientWidth;		pageHeight = document.documentElement.clientHeight;	}else{
   		pageWidth = document.body.clientWidth;		pageHeight = document.body.clientHeight;	}}document.write("宽度：" + pageWidth + " 高度：" + pageHeight);

在上面的代码中，先将window.innerWidth和window.innerHeight的值分别赋给了pageWidth和pageHeight。 然后，检查pageWidth中保存的是不是一个数值：如果不是，则通过检查document.compatMode属性确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

注意：

对于移动设备，window.innerWidth和window.innerHeight保存着可见视图，也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，但通过document.documentElement.clientWidth和document.documentElement.clientHeight提供相同的信息。随着页面的缩放，这些值也会相应变化。

在其他移动浏览器中，document.documentElement是布局视图，即渲染后的页面实际大小，与可见视图不同，可见视图只是整个页面中的一小部分。移动IE浏览器把布局视图的信息保存在document.body.clientWidth和document.bodyclientHeight中。这些值不会随着额面缩放变化。

由于与桌面浏览器存在这些差异，最好是先检测一下用户是否在使用移动设备，然后再决定使用哪个属性。

另外，window对象定义了resizeBy(0和resizeTo(0方法，它们可以按照相对数量和绝对数量调整窗口的大小。这两个方法都包含两个参数，分别表示x轴坐标和y轴坐标。名称中包含To字符串的方法都是绝对的，也就是x和y参数坐标给出窗口新的绝对位置、大小或滚动偏移；名称中包含By字符串的方法都是相对的，也就是它们再窗口的当前位置、大小或滚动偏离上增加所指定的参数x和y的值。

• scrollBy()：

  会将窗口中显示的文档向左、向右或者向上、向下滚动指定数量的像素

• scrollTo()：

  会将文档滚动到一个绝对的位置。它将移动文档以便在窗口文档区的左上角显示指定的文档坐标。

示例：将当前浏览器窗口大小设置为200*200，然后随机指定位置（类似于小网站的移动弹窗）

window.onload = function(){
   	timer = window.setInterval("jump()", 1000);}function jump(){
   	window.resizeTo(200,200);	x = Math.ceil(Math.random() * 1024);	y = Math.ceil(Math.random() * 760);	window.moveTo(x, y);}

测试：IE、Edge成功，Chrome和FireFox失败

转载地址：http://gisqb.baihongyu.com/