window 对象
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
-
1.全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
var age = 29;
function sayAge() {
alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29
抛开全局变量会成为window对象的属性不谈，定义全局变量与window对象上直接定义属性还是有一点差别；全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。
var age = 29;
window.color = "red";
//在IE<9时抛出错误，在其他所有浏览器中都返回false
delete window.age;
//在IE<9时抛出错误，在其他所有浏览器中都返回true
delete window.color;//29
alert(window.age);//29
alert(window.color);//undefined
刚才使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。
尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以指定某个可能未声明的变量是否存在。
//这里会抛出错误，因为oldValue未定义
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
var newValue = window.oldValue;
- 2.窗口关系及框架
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象有一个name属性，其中包含框架的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame"></frame>
<frame src="yetanotherframe.htm" name="rightFrame"></frame>
</frameset>
</frame>
</frameset>
</html>
访问每个框架的不同方式
top对象始终指向最高（最外）层的框架。window对象指向的都是那个框架的特定实例，而非最高层框架。
与top相对的另一个window对象是parent。parent对象始终指向当前框架的直接上层框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frameset Example</title>
</head>
<frameset rows="100,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame"></frame>
<frame src="yetanotherframe.htm" name="rightFrame"></frame>
</frameset>
</frame>
</frameset>
</html>
这个框架集中的一个框架包含了另一个框架，该框架集代码如下：
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame"></frame>
<frame src="blue.htm" name="blueFrame"></frame>
</frameset>
</html>
image.png
除法最高层窗口是通过window.open()打开的，否则window对象的name属性不会包含任何值。
与框架有关的最后一个对象是self，它始终执行window；实际上self和window可以互换使用。
-
3.窗口位置
用来确定和修改window对象位置的属性和方法有很多。使用下列代码可以跨浏览器取得窗口左边和上边的位置。
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY
使用moveTo()和moveBy()方法可将窗口精确地移动到一个新位置。这两个方法都接收两个参。
moveTo()接收的是新位置的x和y坐标
moveBy()接收的是在水平和垂直方向上移动的像素数
//将窗口移动到屏幕左上角
window.moveTo(10,10);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动到（200，300）
window.moveTo(200,300);
//将窗口项做移动50像素
window.moveBy(-50,0);
这两个方法可能会被浏览器禁用，这两个方法都不适用与框架，只能对最外层的window对象使用。
-
4.窗口大小
无法对的浏览器窗口本身的大小，但却可以取得页面视口的大小：
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;
}
}
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。
resizeTo()接收浏览器窗口的新宽度和新高度
resizeBy()接收新窗口与原窗口的宽度和高度只差。
window.resizeTo(100,100);//100*100
window.resizeBy(100,50);//200*150
window.resizeTo(300,300)//300*300
这两个方法也可能被禁用，不适用框架，只能对最外层的window对象使用。
- 5.导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法可以接收四个参数：要加载的URL、窗口目标、一个特性字符串和一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
如果window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
//等同于<a href="https://www.baidu.com/" target="topFrame"></a>
window.open("https://www.baidu.com/","topFrame");
如果有一个名叫“topFrame”的窗口或框架，就会在该窗口或框架加载这个URL，否则，就会创建一个新窗口并将其命名为"topFrame"，第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top或_blank。
-
1.弹出窗口
第3个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。
image.png
-
window.open("https://www.baidu.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
调用close()方法还可以关闭新打开的窗口。
window.close();
这个方法仅适用于通过window.open()打开的弹出窗口。
- 6.间歇调用和超时调用
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和以毫秒表示的时间。
setTimeout("alert('Hello world');",1000);
setTimeout(function () {
alert('Hello world');
},1000);
setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到任务队列中。
调用setTimeout()之后，该方法会返回一个数值ID。
var timeoutId = setTimeout(function () {
alert('Hello world');
},1000);
clearTimeout(timeoutId);//把它取消
间歇调用setInterval()：
setInterval("alert('Hello world');",1000);
setInterval(function () {
alert('Hello world');
},1000);
调用setInterval同样会返回yield间歇调用ID。
var num=0;
var max=10;
var intervalId=null;
function incrementNumber() {
num++;
if(num==max){
clearInterval(intervalId);
alert('Done');
}
}
intervalId = setInterval(incrementNumber,500);
也可以使用超时调用来实现
var num=0;
var max=10;
function incrementNumber() {
num++;
if(num<max){
setTimeout(incrementNumber,500);
}else{
alert('Done');
}
}
setTimeout(incrementNumber,500);
-
7.系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框项用户显示消息。
alert("Hello world!");
alert
if (confirm("Are you sure>")) {
alert("I'm so glad you're sure!");
}else{
alert("I'm sorry to hear you're not sure.");
}
confirm
var result = prompt("What is your name?","");
if(result!==null){
alert("Welcome, "+ result);
}
prompt
网友评论