Window 对象

本课程目的:

  1. 理解 window 对象————Bom 的核心
  2. 控制窗口、框架和弹出窗口
  3. 利用 location 对象中的页面信息
  4. 使用 navigator 对象了解浏览器

window对象表示浏览器的一个实例。

全局作用域

window对象扮演着Global对象，所有在全局作用域中声明的对象、变量和函数都会变成window的属性和方法。

定义全局变量和在window对象上定义属性还是有差别的：全局变量不能通过delete删除，而在window对象上定义的属性则可以。

?
1
2
3
4
5
6
7
8
var age=28;
window.color="red";
//在IE < 9是抛出错误，在其他浏览器中都返回false
delete window.age;
//在IE < 9是抛出错误，在其他浏览器中都返回true
delete window.color;   //return true
alert(window.age);     //28
alert(window.color);   //undefined

在使用var语句添加window属性时，有一个名为[[Configurable]]的特性，这个特性的值被设置为false,因此这样定义的属性不可以通过delete删除。

在尝试访问未声明的变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在。

?
1
2
3
4
//这里抛出错误，因为oldValue未声明
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
var newValue = window.oldValue     //  alert(newValue);  //undefined

其实很多全局JavaScript对象如localtion和navigator实际上都是window对象的属性。

窗口位置

多数浏览器都提供了screenLeft和screenTop,分别用于表示窗口相对与屏幕左边和上边的位置。FF则在screenX和screenY属性中提供相同的窗口信息，Safari金额Chorme也同时支持这两个属性。

使用下面代码可以跨浏览器取得窗口左边和上边的位置。

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

注意：在IE和Opera中screenLeft和screenTop中保存的是从屏幕左边和上边到window对象表示的页面可见区域的距离。在Chrome、FF和Safari中，screenY和screenTop中保存的是整个浏览器对于屏幕的坐标值。最终结果就是无法在跨浏览器条件下取得窗口左边和上边的精确坐标值。

使用moveTo()和moveBy()方法倒是可以将窗口精确的移动到新位置，两个方法都接收两个参数，moveTo()接收的是x,y轴的坐标，moveBy()接收的是移动的像素。

?
1
2
3
4
//将屏幕移动到左上方
moveTo(0,0);
//将窗口左移50px
moveBy(-50,0);

但是，这两个方法可能会被浏览器禁用。这两个方法也只适用于最外层的window对象，不适用框架frame

窗口大小

主流浏览器都为确定窗口大小提供了4个属性：innerWidth、innerHight、outerWidth和outerHight。

在IE9+、Safari和FF中，outerWidth和outerHight返回的是浏览器窗口本身的尺寸(无论从哪个框架访问),但在Opera中，这两个属性的值表示页面视图容器的大小(单个标签页窗口的大小)。而innerWidth、innerHight则表示该容器中页面视图的大小（减去边框的宽度）。但在Chrome中，这4个属性都表示视口大小而非浏览器大小。

IE9之前没有提供取得浏览器窗口尺寸的属性；不过它通过DOM提供了页面可视区域的信息。

在IE、FF、Chrome、Opera和Safari中，document.documentElement.clientWidth和document.documentElement.clientHight中保存着页面视口信息。在IE6下，要在标准模式下有效。如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHight取得相同信息。Chrome则不分标准模式还是混杂模式。

虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
    }
}
alert("Width: " + pageWidth);
alert("Height: " + pageHeight);

对于移动设备，window.innerWidth和window.innerHight保存着可见视口，也就是屏幕上页面区域的大小。移动IE浏览器则要通过document.documentElement.clientWidth和document.documentElement.clientHight获取相同信息。

导航和打开窗口

window.open()方法既可以打开一个特定的URL，也可以打开一个新的浏览器窗口。该方法接收4个参数：URL，窗口目标，一个特性字符串和一个表示新页面是否取代当前页面的布尔值。

?
1
window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。

间歇调用和超时调用

JavaScript是单线程语言，但它允许通过设置超时值和间歇时间来调度代码在特定时刻执行。前者是在指定的时间过后执行代码，后者则是每个指定的时间就调用一次。

setTimeout() 超时调用

setTimeout() 方法接受两个参数，第一个参数是函数，第二个参数是时间（单位微秒），返回数值ID。

?
1
2
3
setTimeout( function () { 
   alert("你好!"); 
},1000);

调用setTimeout()后该方法会返回一个数值ID，表示超时调用，可以通过它取消超时调用。

?
1
2
3
4
var timeOutId = setTimeout( function (){
 alert("你好!");
},1000);
clearTimeout(timeOutId);

setInterval() 间歇调用

setInterval()方法接受两个参数，第一个参数是函数，第二个参数是时间（单位微秒），返回数值ID。

?
1
2
3
setInterval( function () { 
   alert("你好!"); 
},1000);

取消调用clearInterval()，接受一个参数间歇调用ID。

?
1
2
3
4
var timeOutId = setInterval( function (){
 alert("你好!");
},1000);
clearInterval(timeOutId);

尽量用超时调用替代间歇调用

?
1
2
3
4
5
6
7
8
9
10
11
var num = 0; 
var max = 10; 
function incrementNumber() { 
   num++; 
   if (num < max) { 
     setTimeout(incrementNumber,1000); 
   } else { 
     alert("OK"); 
   } 
}
setTimeout(incrementNumber,1000);

系统对话框

警告框alert()

?
1
alert("欢迎光临!");

信息框confirm(),有取消，确定按钮

?
1
2
3
4
5
if (confirm("你同意吗？")) { 
  alert("同意"); 
} else { 
  alert("不同意"); 
}

提示框prompt(),用于提示用户输入一些文本

?
1
2
3
4
var result = prompt("您尊姓大名?"," "); 
if (result !== null) { 
  alert(“欢迎光临，”+result); 
}

上一节：函数

下一节：Location 对象