BOM中的window对象

window 对象

window对象表示一个浏览器的一个实例。浏览器中，window对象有两个角色：

• 访问浏览器窗口的一个接口
• ECMAScript中的Global对象

1. 全局作用域

window对象作为全局作用域时，里面的所有变量和函数都会变为window对象的属性和方法。

有以下几点需要注意：

• 如果直接定义全局变量，则次变量不能当做window对象的属性删除

    var a = 1;
    delete window.a;             // false
    // 上面这个举动在IE9以下浏览器中会报错
  

• 如果直接在全局中赋值给变量一个不存在的变量会产生错误，而把这个变量作为window对象赋值则不会产生错误。

    var a = b;
    alert(a);     // 此举动会让浏览器报错
    var a = window.b;
    alert(a);     // undefined 
  

2. frame框架窗口中的window对象

如果在页面中包含框架，那么每个框架中都会有自己的一个window对象。

如何获取框架中的一个frame页面的中的全局对象：

frame.html

打开后的frame.html

举个栗子：如果在topFrame页面中定义一个全局变量： var a = 1; ，则此变量为window.frames[0]对象的属性。

另外，最外层框架不是中的全局对象不再是window，而是top。

3. 窗口位置

获取window对象的位置（这里的window对象是作为一个浏览器窗口）：

• screenLeft 和 screenTop 。 IE、Sanfari、Opera、Chrome 支持
• screenX 和 screenY 。 Firefox支持

为了兼容所有浏览器，可以这样定义窗口位置：
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

自定义修改窗口位置：

• moveTo(x, y) 相对浏览器窗口移动
• moveBy(x, y) 相对当前移动

注意：这两个方法只能相对于浏览器窗口，不适用于框架。另外此方法只能在IE中可以直接改变窗口位置，其他浏览器则只能在window.open()中打开的窗口中使用。

4. 窗口大小

获取浏览器窗口大小：

• innerWidth 和 innerHeight 表示浏览器视口区域的宽度和高度
• outerWidth 和 outerHeight 表示浏览器整个窗口的宽度和高度

以上window对象属性只是适用于 IE9+ 及其他所有浏览器，如果兼容IE8及以下，可以利用以下属性：

• document.documentElement.clientWidth 和 document.documentElement.clientHeight 表示视口区域大小，适用于各主流浏览器的标准模式
• document.body.clientWidth 和 document.body.clientHeight 适用于IE6中的混杂模式中获取视口区域大小，现在几乎已经废弃

自定义修改窗口大小：

• resizeTo(w ,h) 绝对大小
• resizeBy(w, h) 相对原来增加或者减少

注意：与moveTo,moveBy方法的特性相同

5. 窗口导航

• window.open(url, frame, ...) 打开一个窗口，URL参数后面的参数可以是框架名称、控制窗口特性如_self、 _parent、 _top、 _blank 等。

  举个栗子：var newWin = window.open("https://www.baidu.com/", "_black", "height=400,width=400,top=10,left=10,resizable=yes");
  表示打开了一个400 X 400 像素，距离上左10像素的可以改变其大小的浏览器窗口。
  而且在新窗口中我们终于可以没有顾忌的适用moveTo和resizeTo这两个属性了：

    // 调整大小
    newWin.resizeTo(500, 500);
    // 移动位置
    newWin.moveTo(100, 100);
  

• newWin.close(); 关闭打开的这个窗口

6. setTimeout 和 setInterval

• setTimeout() 超时器

  setTimeout(func,time); 参数为执行的代码（最好是一个匿名函数）和一个毫秒数表示的时间。
  举个栗子：

    setTimeout(function() {
      alert("时间到啦");
    }, 1000);
  
    // 一秒后弹出 时间到啦。
  

  清除超时器：在设置超时器的时候，创建一个变量去保存这个超时器的ID

    var id = setTimeout(function() {
      alert("时间到啦");
    }, 1000);
  
    clearTimeout(id);
  
    // 此处不会有任何动作发生，因为在1s内，超时器已经被清除
  

  • setInterval() 定时器

    使用方式与超时器相同，但是不同的是每过一段时间都会调用要执行的代码。

    举个栗子：

      setInterval(function() {
        console.log("过去了一秒");
      }, 1000);
    
      // 没一秒都是输出一句话 过去了一秒
    

    清除定时器

    和超时器要一样，定时器的调用也会返回一个id，此时需要clearInterval()来清除。

7. 各种弹框

• alert() 仅仅是简单的弹出消息，参数为要弹出的内容。
• confirm() 参数也是要弹出的内容，但是包含两个按钮 确定 和 取消 。点击确定后函数会返回true，点击取消后函数会返回false。
• prompt() 参数除了要弹出的内容外还有一个可选参数，为对话框中的值，点击确定后会返回对话框中的内容。

最近工作繁忙，如有出错，还请各位读者大大指出！