BOM中的那点事-window(二)

3. 窗口的位置

       我们有很多的方式来获取和修改窗体的位置，IE，Safari，Opera和Chrome都提供了screenLeft和screenRight属性，分别表示window的相对于屏幕左边和上边的位置。但是FireFox提供的两个对应的属性为screenX和screenY，Safari和Chrome同时支持这两个属性。虽然Opera也支持screenX和screenY这两个属性，但是和screenLeft和screenTop并不等价，因此建议不在Opera中使用screenX和screenY。我在IE9上测试了screenX和screenY，虽然也支持，但是也和screenLeft和screenTop表示不同的含义，后面说到。可以通过如下代码跨浏览器获取窗口的位置：

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

在使用这两个属性的时候，有些问题需要注意：

<1>. 在IE，Opera和Chrome中，screenLeft和screenTop保存的是当前window对象到屏幕左上角的垂直和水平距离，不包括边框；这里有一点需要提一下就是在IE9中screenX和screenY保存的位置包括边框(IE以前的版本大家可以试一下)，以IE为例如下图所示：

<2>. 在FireFox，Safari和Chrome中screenX和screenY始终返回top到屏幕左上角的水平和垂直距离，而IE和Opera会返回对应window的精确位置坐标。

终上所述，无法跨浏览器取得窗口左边和上边的精确坐标，但是window提供的moveTo和moveBy可以把窗口移动到精确的新位置。moveTo接受新坐标的x和y坐标，而moveBy接受水平或者垂直移动的像素，需要注意的是这两个方法只能对最外层window起作用，而且这两个方法可能被浏览器禁用(IE7以后以及Opera默认禁用)。如下示例：

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

4.窗口大小

      前面提到不能跨浏览器精确确定window的位置，同样，想确定窗口的大小也不是一件简单的事。FireFox，Safari，Opera和Chrome都提供了innerWidth, innerHeight, outerWidth, outerHeight四个属性。在Safari和FireFox中outerWidth和outerHeight返回浏览器本身的大小，而在Opera中返回页面视图容器的大小。而innerWidth和innerHeight表示页面中试图区域的大小。而在Chrome中四个属性都返回页面视图的大小，而非浏览器的大小。特别的，IE旧版本没有提供获取当前浏览器大小的接口，但是通过DOM提供了页面可视区域的信息。但是通过测试，在IE9中已经提供这四个属性，同样的innerWidth和innerHeight保存着页面可视区域的大小，而outerWidth和outerHeight保存着浏览器窗体本身的大小。用一个表总结如下：

	IE9	FireFox	Safari	Opera	Chrome
innerWidth	页面视图宽度	页面视图宽度	页面视图宽度	页面视图宽度	页面视图宽度
innerHeight	页面视图高度	页面视图高度	页面视图高度	页面视图高度	页面视图高度
outerWidth	浏览器宽度	浏览器宽度	浏览器宽度	页面视图宽度	页面视图宽度
outerHeight	浏览器高度	浏览器高度	浏览器高度	页面视图高度	页面视图高度

除了通过BOM可以访问窗体大小外，通过DOM同样也可以获取窗体的大小信息，在IE，FireFox，Safari，Opera以及Chrome中通过如下代码可以获取窗体大小信息，但是返回的都是页面可视区域的大小：

//用于标准模式
var viewPortHeight = document.documentElement.clientHeight;
var viewPortWidht = document.documentElement.clientWidth;
//用于混杂模式
var viewPortHeight1 = document.body.clientHeight;
var viewPortWidth1 = document.body.clientWidth;

另外通过resizeTo和resizeBy两个函数可以修改窗口的大小，resizeTo把窗口大小修改为参数表示的大小，而resizeBy在原有基础上修改参数表示的大小，如下代码：

//调整窗口大小为100X100
window.resizeTo(100, 100);
//调整窗口长宽各增大100
window.resizeBy(100, 100);

和上一节提到的moveTo和moveBy一样，resizeTo和resizeBy同样也可能会被浏览器禁用，而且这两个方法只对最外层window起作用，不支持内部框架。

 

欢迎批评指正。