window 對(duì)象
BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。
-
1.全局作用域
由于window對(duì)象同時(shí)扮演著ECMAScript中Global對(duì)象的角色，因此所有在全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。
var age = 29;
function sayAge() {
alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29
拋開全局變量會(huì)成為window對(duì)象的屬性不談，定義全局變量與window對(duì)象上直接定義屬性還是有一點(diǎn)差別；全局變量不能通過delete操作符刪除，而直接在window對(duì)象上的定義的屬性可以。
var age = 29;
window.color = "red";
//在IE<9時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回false
delete window.age;
//在IE<9時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回true
delete window.color;//29
alert(window.age);//29
alert(window.color);//undefined
剛才使用var語句添加的window屬性有一個(gè)名為[[Configurable]]的特性，這個(gè)特性的值被設(shè)置為false，因此這樣定義的屬性不可以通過delete操作符刪除。
嘗試訪問未聲明的變量會(huì)拋出錯(cuò)誤，但是通過查詢window對(duì)象，可以指定某個(gè)可能未聲明的變量是否存在。
//這里會(huì)拋出錯(cuò)誤，因?yàn)閛ldValue未定義
var newValue = oldValue;
//這里不會(huì)拋出錯(cuò)誤，因?yàn)檫@是一次屬性查詢
//newValue的值是undefined
var newValue = window.oldValue;
- 2.窗口關(guān)系及框架
如果頁面中包含框架，則每個(gè)框架都擁有自己的window對(duì)象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架名稱來訪問相應(yīng)的window對(duì)象。每個(gè)window對(duì)象有一個(gè)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對(duì)象始終指向最高（最外）層的框架。window對(duì)象指向的都是那個(gè)框架的特定實(shí)例，而非最高層框架。
與top相對(duì)的另一個(gè)window對(duì)象是parent。parent對(duì)象始終指向當(dāng)前框架的直接上層框架。
<!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>
這個(gè)框架集中的一個(gè)框架包含了另一個(gè)框架，該框架集代碼如下：
<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>
除法最高層窗口是通過window.open()打開的，否則window對(duì)象的name屬性不會(huì)包含任何值。
與框架有關(guān)的最后一個(gè)對(duì)象是self，它始終執(zhí)行window；實(shí)際上self和window可以互換使用。
-
3.窗口位置
用來確定和修改window對(duì)象位置的屬性和方法有很多。使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置。
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY
使用moveTo()和moveBy()方法可將窗口精確地移動(dòng)到一個(gè)新位置。這兩個(gè)方法都接收兩個(gè)參。
moveTo()接收的是新位置的x和y坐標(biāo)
moveBy()接收的是在水平和垂直方向上移動(dòng)的像素?cái)?shù)
//將窗口移動(dòng)到屏幕左上角
window.moveTo(10,10);
//將窗口向下移動(dòng)100像素
window.moveBy(0,100);
//將窗口移動(dòng)到（200，300）
window.moveTo(200,300);
//將窗口項(xiàng)做移動(dòng)50像素
window.moveBy(-50,0);
這兩個(gè)方法可能會(huì)被瀏覽器禁用，這兩個(gè)方法都不適用與框架，只能對(duì)最外層的window對(duì)象使用。
-
4.窗口大小
無法對(duì)的瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小：
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()方法可以調(diào)整瀏覽器窗口的大小。
resizeTo()接收瀏覽器窗口的新寬度和新高度
resizeBy()接收新窗口與原窗口的寬度和高度只差。
window.resizeTo(100,100);//100*100
window.resizeBy(100,50);//200*150
window.resizeTo(300,300)//300*300
這兩個(gè)方法也可能被禁用，不適用框架，只能對(duì)最外層的window對(duì)象使用。
- 5.導(dǎo)航和打開窗口
使用window.open()方法既可以導(dǎo)航到一個(gè)特定的URL，也可以打開一個(gè)新的瀏覽器窗口。這個(gè)方法可以接收四個(gè)參數(shù)：要加載的URL、窗口目標(biāo)、一個(gè)特性字符串和一個(gè)表示新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值。通常只傳遞第一個(gè)參數(shù)，最后一個(gè)參數(shù)只在不打開新窗口的情況下使用。
如果window.open()傳遞了第二個(gè)參數(shù)，而且該參數(shù)是已有窗口或框架的名稱，那么就會(huì)在具有該名稱的窗口或框架中加載第一個(gè)參數(shù)指定的URL。
//等同于<a target="topFrame"></a>
window.open("https://www.baidu.com/","topFrame");
如果有一個(gè)名叫“topFrame”的窗口或框架，就會(huì)在該窗口或框架加載這個(gè)URL，否則，就會(huì)創(chuàng)建一個(gè)新窗口并將其命名為"topFrame"，第二個(gè)參數(shù)也可以是下列任何一個(gè)特殊的窗口名稱：_self、_parent、_top或_blank。
-
1.彈出窗口
第3個(gè)參數(shù)是一個(gè)逗號(hào)分隔的設(shè)置字符串，表示在新窗口中都顯示哪些特性。
image.png
-
window.open("https://www.baidu.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
調(diào)用close()方法還可以關(guān)閉新打開的窗口。
window.close();
這個(gè)方法僅適用于通過window.open()打開的彈出窗口。
- 6.間歇調(diào)用和超時(shí)調(diào)用
超時(shí)調(diào)用需要使用window對(duì)象的setTimeout()方法，它接受兩個(gè)參數(shù)：要執(zhí)行的代碼和以毫秒表示的時(shí)間。
setTimeout("alert('Hello world');",1000);
setTimeout(function () {
alert('Hello world');
},1000);
setTimeout()的第二個(gè)參數(shù)告訴JavaScript再過多長(zhǎng)時(shí)間把當(dāng)前任務(wù)添加到任務(wù)隊(duì)列中。
調(diào)用setTimeout()之后，該方法會(huì)返回一個(gè)數(shù)值ID。
var timeoutId = setTimeout(function () {
alert('Hello world');
},1000);
clearTimeout(timeoutId);//把它取消
間歇調(diào)用setInterval()：
setInterval("alert('Hello world');",1000);
setInterval(function () {
alert('Hello world');
},1000);
調(diào)用setInterval同樣會(huì)返回yield間歇調(diào)用ID。
var num=0;
var max=10;
var intervalId=null;
function incrementNumber() {
num++;
if(num==max){
clearInterval(intervalId);
alert('Done');
}
}
intervalId = setInterval(incrementNumber,500);
也可以使用超時(shí)調(diào)用來實(shí)現(xiàn)
var num=0;
var max=10;
function incrementNumber() {
num++;
if(num<max){
setTimeout(incrementNumber,500);
}else{
alert('Done');
}
}
setTimeout(incrementNumber,500);
-
7.系統(tǒng)對(duì)話框
瀏覽器通過alert()、confirm()和prompt()方法可以調(diào)用系統(tǒng)對(duì)話框項(xiàng)用戶顯示消息。
alert("Hello world!");
if (confirm("Are you sure>")) {
alert("I'm so glad you're sure!");
}else{
alert("I'm sorry to hear you're not sure.");
}
var result = prompt("What is your name?","");
if(result!==null){
alert("Welcome, "+ result);
}
