JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记

用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了
screenLeft 和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在
screenX 和screenY 属性中提供相同的窗口位置信息，Safari 和Chrome 也同时支持这两个属性。Opera
虽然也支持screenX 和screenY 属性，但与screenLeft 和screenTop 属性并不对应，因此建议大
家不要在Opera 中使用它们。使用下列代码可以跨浏览器取得窗口左边和上边的位置。

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

这个例子运用二元操作符首先确定screenLeft 和screenTop 属性是否存在，如果是（在IE、
Safari、Opera 和Chrome 中），则取得这两个属性的值。如果不存在（在Firefox 中），则取得screenX
和screenY 的值。
在使用这些值的过程中，还必须注意一些小问题。在IE、Opera 中，screenLeft 和screenTop 中保存
的是从屏幕左边和上边到由window 对象表示的页面可见区域的距离。换句话说，如果window 对象是
最外层对象，而且浏览器窗口紧贴屏幕最上端——即y 轴坐标为0，那么screenTop 的值就是位于页面
可见区域上方的浏览器工具栏的像素高度。但是，在Chrome、Firefox 和Safari 中，screenY 或screenTop
中保存的是整个浏览器窗口相对于屏幕的坐标值，即在窗口的y 轴坐标为0 时返回0。
更让人捉摸不透是，Firefox、Safari 和Chrome 始终返回页面中每个框架的top.screenX 和
top.screenY 值。即使在页面由于被设置了外边距而发生偏移的情况下，相对于window 对象使用
screenX 和screenY 每次也都会返回相同的值。而IE 和Opera 则会给出框架相对于屏幕边界的精确坐
标值。
最终结果，就是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而，使用moveTo()
和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中
moveTo()接收的是新位置的x 和y 坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。
下面来看几个例子：

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);

需要注意的是，这两个方法可能会被浏览器禁用；而且，在Opera 和IE 7（及更高版本）中默认就
是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window 对象使用。