BOM是瀏覽器對象模型
Window對象
- BOM 的核心對象是window尺借，它表示瀏覽器的一個實例芯丧。
- 在瀏覽器中，window 對象有雙重角色叫编，它既是通過JavaScript訪問瀏覽器窗口的一個接口辖佣，又是ECMAScript 規(guī)定的Global 對象。
- 在網(wǎng)頁中定義的任何一個對象搓逾、變量和函數(shù)卷谈，都以window作為其Global對象，因此有權(quán)訪問
parseInt()等方法霞篡。
1世蔗、全局作用域
- 由于window 對象同時扮演著ECMAScript中Global對象的角色，因此所有在全局作用域中聲明的變量朗兵、函數(shù)都會變成window 對象的屬性和方法污淋。
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
- 定義全局變量與在window對象上直接定義屬性還是有一點差別：全局變量不能通過delete 操作符刪除，而直接在window 對象上的定義的屬性可以余掖。
var age = 29;
window.color = "red";
//在IE < 9 時拋出錯誤寸爆，在其他所有瀏覽器中都返回false
delete window.age;
//在IE < 9 時拋出錯誤，在其他所有瀏覽器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
- 嘗試訪問未聲明的變量會拋出錯誤盐欺，但是通過查詢window對象赁豆，可以知道某個可能未聲明的變量是否存在。
//這里會拋出錯誤找田，因為oldValue 未定義
var newValue = oldValue;
//這里不會拋出錯誤歌憨，因為這是一次屬性查詢
//newValue 的值是undefined
var newValue = window.oldValue;
2、窗口關(guān)系和框架
- 如果頁面中包含框架墩衙，那么每個框架都有自己的window對象务嫡，并保存在frames集合中甲抖。
- 在frames集合中，可以通過數(shù)值索引（從0開始心铃，從左至右准谚，從上到下）或者框架名稱來訪問相應的window 對象。
- 每個window 對象都有一個name 屬性去扣，其中包含框架的名稱柱衔。
<html>
<head>
<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 src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
- top 對象始終指向最高（最外）層的框架，也就是瀏覽器窗口愉棱。使用它可以確保在一個
框架中正確地訪問另一個框架. - 因為對于在一個框架中編寫的任何代碼來說唆铐，其中的window對象指向的都是那個框架的特定實例，而非最高層的框架奔滑。
- parent（父）對象始終指向當前框架的直接上層框架艾岂。
- 在某些情況下，parent 有可能等于top朋其；但在沒有框架的情況下王浴，parent 一定等于
top（此時它們都等于window）
3、窗口位置
- 用來確定和修改window 對象位置的屬性和方法有很多
- IE梅猿、Safari氓辣、Opera 和Chrome都提供了screenLeft和screenTop屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置袱蚓。
- Firefox 則在screenX和screenY屬性中提供相同的窗口位置信息钞啸，Safari和Chrome也同時支持這兩個屬性。
//跨瀏覽器獲取窗口左邊和上邊的位置
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
- 注意問題：如果window 對象是最外層對象喇潘，而且瀏覽器窗口緊貼屏幕最上端——即y 軸坐標為0爽撒，那么screenTop的值就是位于頁面可見區(qū)域上方的瀏覽器工具欄的像素高度。在Chrome响蓉、Firefox和Safari中硕勿，screenY或screenTop中保存的是整個瀏覽器窗口相對于屏幕的坐標值，即在窗口的y 軸坐標為0 時返回0枫甲。
- 兼容問題：Firefox源武、Safari和Chrome始終返回頁面中每個框架的top.screenX和top.screenY 值。即使在頁面由于被設置了外邊距而發(fā)生偏移的情況下想幻，相對于window對象使用screenX 和screenY每次也都會返回相同的值粱栖。而IE和Opera則會給出框架相對于屏幕邊界的精確坐標值。最終結(jié)果脏毯，就是無法在跨瀏覽器的條件下取得窗口左邊和上邊的精確坐標值
- 使用moveTo()和moveBy()方法可能將窗口精確地移動到一個新位置闹究。這兩個方法都接收兩個參數(shù)，其中moveTo()接收的是新位置的x和y坐標值食店，而moveBy()接收的是在水平和垂直方向上移動的像素數(shù)渣淤。
//將窗口移動到屏幕左上角
window.moveTo(0,0);
//將窗向下移動100 像素
window.moveBy(0,100);
//將窗口移動到(200,300)
window.moveTo(200,300);
//將窗口向左移動50 像素
window.moveBy(-50,0);
- 這兩個方法可能會被瀏覽器禁用赏寇；而且，在Opera和IE7（及更高版本）中默認就是禁用的
4价认、窗口大小
- IE9+嗅定、Firefox、Safari用踩、Opera和Chrome均為此提供了4個屬性：innerWidth渠退、innerHeight、outerWidth 和outerHeight脐彩。
- 在IE9+碎乃、Safari 和Firefox中，outerWidth和outerHeight返回瀏覽器窗口本身的尺寸（無論是從最外層的window 對象還是從某個框架訪問）
- 在Opera 中惠奸，outerWidth和outerHeight的值表示頁面視圖容器（Opera中單個標簽頁對應的瀏覽器窗口）的大小
- innerWidth 和innerHeight則表示該容器中頁面視圖區(qū)的大熊А（減去邊框?qū)挾龋?/li>
- 在Chrome 中，outerWidth晨川、outerHeight與innerWidth、innerHeight返回相同的值删豺，即視口（viewport）大小而非瀏覽器窗口大小共虑。
- IE8 及更早版本沒有提供取得當前瀏覽器窗口尺寸的屬性；不過呀页，它通過DOM提供了頁面可見區(qū)域的相關(guān)信息。雖然最終無法確定瀏覽器窗口本身的大小蓬蝶，但卻可以取得頁面視口的大小。
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;
}
}
- 對于移動設備培愁，window.innerWidth和window.innerHeight保存著可見視口，也就是屏幕上可見頁面區(qū)域的大小缓窜。移動IE瀏覽器不支持這些屬性定续，但通過document.documentElement.clientWidth 和document.documentElement.clientHeihgt提供了相同的信息隨著頁面的縮放禾锤，這些值也會相應變化。
- 在其他移動瀏覽器中恩掷，document.documentElement度量的是布局視口倡鲸，即渲染后頁面的實際大小（與可見視口不同峭状，可見視口只是整個頁面中的一小部分）
- 移動IE 瀏覽器把布局視口的信息保存在document.body.clientWidth和document.body.clientHeight 中。這些值不會隨著頁面縮放變化宁炫。
- 使用resizeTo()和resizeBy()方法可以調(diào)整瀏覽器窗口的大小羔巢。這兩個方法都接收兩個參數(shù)，其中resizeTo()接收瀏覽器窗口的新寬度和新高度竿秆，而resizeBy()接收新窗口與原窗口的寬度和高度之差幽钢。
//調(diào)整到100×100
window.resizeTo(100, 100);
//調(diào)整到200×150
window.resizeBy(100, 50);
//調(diào)整到 300×300
window.resizeTo(300, 300);
5、導航和打開窗口
- 使用window.open()方法既可以導航到一個特定的URL蕾羊，也可以打開一個新的瀏覽器窗口帽驯。這個方法可以接收4個參數(shù)：要加載的URL、窗口目標利凑、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值
//等同于< a target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");
/**如果有一個名叫"topFrame"的窗口或者框架嫌术，就會在該窗口或框架加載這個URL；否則割按，就會創(chuàng)建一個新窗口并將其命名為"topFrame"磷籍。**/
- 如果給window.open()傳遞的第二個參數(shù)并不是一個已經(jīng)存在的窗口或框架择示，那么該方法就會根據(jù)在第三個參數(shù)位置上傳入的字符串創(chuàng)建一個新窗口或新標簽頁.
- 如果沒有傳入第三個參數(shù)，那么就會打開一個帶有全部默認設置（工具欄栅盲、地址欄和狀態(tài)欄等）的新瀏覽器窗口。
- 第三個參數(shù)是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性鱼鼓。下表列出了可以出現(xiàn)在這個字符串中的設置選項该编。
| 設 置 | 值 | 說 明 |
|---|---|---|
| fullscreen | yes或no | 表示瀏覽器窗口是否最大化课竣。僅限IE |
| height | 數(shù)值 | 表示新窗口的高度。不能小于100 |
| left | 數(shù)值 | 表示新窗口的左坐標于樟。不能是負值 |
| location | yes或no | 表示是否在瀏覽器窗口中顯示地址欄迂曲。不同瀏覽器的默認值不同。如果設置為no关霸，地址欄可能會隱藏杰扫，也可能會被禁用（取決于瀏覽器） |
| menubar | yes或no | 表示是否在瀏覽器窗口中顯示菜單欄。默認值為no |
| resizable | yes或no | 表示是否可以通過拖動瀏覽器窗口的邊框改變其大小。默認值為no |
| scrollbars | yes或no | 表示如果內(nèi)容在視口中顯示不下啤覆，是否允許滾動惭聂。默認值為no |
| status | yes或no | 表示是否在瀏覽器窗口中顯示狀態(tài)欄。默認值為no |
| toolbar | yes或no | 表示是否在瀏覽器窗口中顯示工具欄笨觅。默認值為no |
| top | 數(shù)值 | 表示新窗口的上坐標见剩。不能是負值 |
| width | 數(shù)值 | 表示新窗口的寬度扫俺。不能小于100 |
window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
/**打開一個新的可以調(diào)整大小的窗口，窗口初始大小為400×400 像素羹呵，并且距屏幕上沿
和左邊各10 像素。**/
- window.open()方法會返回一個指向新窗口的引用歉铝。通過這個返回的對象凑耻，可以像操作其他窗口一樣操作新打開的窗口拳话。
var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
//調(diào)整大小
wroxWin.resizeTo(500,500);
//移動位置
wroxWin.moveTo(100,100);
//調(diào)用close()方法還可以關(guān)閉新打開的窗口。對于瀏覽器的主窗口呀非，如果沒有
//得到用戶的允許是不能關(guān)閉它的
wroxWin.close();
alert(wroxWin.closed); //true
- 新創(chuàng)建的window 對象有一個opener屬性镜盯，其中保存著打開它的原始窗口對象速缆。這個屬性只在彈出窗口中的最外層window對象（top）中有定義，而且指向調(diào)用window.open()的窗口或框架剧董。
var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
alert(wroxWin.opener == window); //true
- 在Chrome中破停，將新創(chuàng)建的標簽頁的opener屬性設置為null，即表示在單獨的進程中運行新標簽頁.
var wroxWin = window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
wroxWin.opener = null;
/**將opener 屬性設置為null就是告訴瀏覽器新創(chuàng)建的標簽頁不需要與打開它的標簽頁通信毅臊，因此可以在獨立的進程中運行管嬉。標簽頁之間的聯(lián)系一旦切斷朗鸠，將沒有辦法恢復。**/
- 大多數(shù)瀏覽器都內(nèi)置有彈出窗口屏蔽程序,而沒有內(nèi)置此類程序的瀏覽器求厕，也可以安裝Yahoo!,Toolbar 等帶有內(nèi)置屏蔽程序的實用工具.
- 如果是瀏覽器內(nèi)置的屏蔽程序阻止的彈出窗口，那么window.open()很可能會返回null美浦。此時项栏，只要檢測這個返回的值就可以確定彈出窗口是否被屏蔽了。
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
alert("The popup was blocked!");
}
- 如果是瀏覽器擴展或其他程序阻止的彈出窗口流酬，那么window.open()通常會拋出一個錯誤芽腾。因此页衙，要想準確地檢測出彈出窗口是否被屏蔽，必須在檢測返回值的同時艰躺，將對window.open()的調(diào)用封裝在一個try-catch 塊中眨八。
var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
alert("The popup was blocked!");
}
6廉侧、間歇調(diào)用和超時調(diào)用
- JavaScript 是單線程語言，但它允許通過設置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行闰蚕。前者是在指定的時間過后執(zhí)行代碼枕扫，而后者則是每隔指定的時間就執(zhí)行一次代碼辱魁。
- 超時調(diào)用需要使用window對象的setTimeout()方法染簇，它接受兩個參數(shù)：要執(zhí)行的代碼和以毫秒表示的時間（即在執(zhí)行代碼前需要等待多少毫秒）。
- 第一個參數(shù)可以是一個包含JavaScript 代碼的字符串砾赔，也可以是一個函數(shù)。
//由于傳遞字符串可能導致性能損失,不建議傳遞字符串妓盲！
setTimeout("alert('Hello world!') ", 1000);
//推薦的調(diào)用方式
setTimeout(function() {
alert("Hello world!");
}, 1000);
- 第二個參數(shù)是一個表示等待多長時間的毫秒數(shù)专普，但經(jīng)過該時間后指定的代碼不一定會執(zhí)行檀夹。
【原因】：JavaScript是一個單線程序的解釋器，因此一定時間內(nèi)只能執(zhí)行一段代碼娜亿。為了控制要執(zhí)行的代碼瓶盛，就有一個JavaScript任務隊列。這些任務會按照將它們添加到隊列的順序執(zhí)行。setTimeout()的第二個參數(shù)告訴JavaScript再過多長時間把當前任務添加到隊列中够挂。如果隊列是空的藕夫，那么添加的代碼會立即執(zhí)行；如果隊列不是空的办悟，那么它就要等前面的代碼執(zhí)行完了以后再執(zhí)行滩褥。 - 調(diào)用setTimeout()之后瑰煎，該方法會返回一個數(shù)值ID，表示超時調(diào)用魄健。這個超時調(diào)用ID 是計劃執(zhí)行代碼的唯一標識符插勤，可以通過它來取消超時調(diào)用革骨。
- 要取消尚未執(zhí)行的超時調(diào)用計劃良哲，可以調(diào)用clearTimeout*()方法并將相應的超時調(diào)用ID 作為參數(shù)傳遞給它助隧。
//設置超時調(diào)用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);
- 間歇調(diào)用會按照指定的時間間隔重復執(zhí)行代碼喇颁，直至間歇調(diào)用被取消或者頁面被卸載.
- 設置間歇調(diào)用的方法是setInterval()，它接受的參數(shù)與setTimeout()相同：要執(zhí)行的代碼（字符串或函數(shù)）和每次執(zhí)行之前需要等待的毫秒數(shù)蔫浆。
//不建議傳遞字符串姐叁！
setInterval ("alert('Hello world!') ", 10000);
//推薦的調(diào)用方式
setInterval (function() {
alert("Hello world!");
}, 10000);
- 調(diào)用setInterval()方法同樣也會返回一個間歇調(diào)用ID外潜，該ID可用于在將來某個時刻取消間歇調(diào)用。要取消尚未執(zhí)行的間歇調(diào)用嘱吗，可以使用clearInterval()方法并傳入相應的間歇調(diào)用ID滔驾。
- 取消間歇調(diào)用的重要性要遠遠高于取消超時調(diào)用哆致，因為在不加干涉的情況下，間歇調(diào)用將會一直執(zhí)行到頁面卸載耻蛇。
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果執(zhí)行次數(shù)達到了max 設定的值胞此，則取消后續(xù)尚未執(zhí)行的調(diào)用
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500);
- 這個模式也可以使用超時調(diào)用來實現(xiàn),在使用超時調(diào)用時豌鹤，沒有必要跟蹤超時調(diào)用ID枝缔，因為每次執(zhí)行代碼之后，如果不再設置另一次超時調(diào)用灵临，調(diào)用就會自行停止儒溉。
- 一般認為，使用超時調(diào)用來模擬間歇調(diào)用的是一種最佳模式波闹。在開發(fā)環(huán)境下涛碑，很少使用真正的間歇調(diào)用蒲障，原因是后一個間歇調(diào)用可能會在前一個間歇調(diào)用結(jié)束之前啟動。使用超時調(diào)用庄撮，則完全可以避免這一點毙籽。
var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果執(zhí)行次數(shù)未達到max 設定的值坑赡，則設置另一次超時調(diào)用
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
7、系統(tǒng)對話框
- 瀏覽器通過alert()厅翔、confirm()和prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息搀突。
- 它們的外觀由操作系統(tǒng)及（或）瀏覽器設置決定仰迁，而不是由CSS 決定。
- 通過這幾個方法打開的對話框都是同步和模態(tài)的施蜜。也就是說雌隅，顯示這些對話框的時候代碼會停止執(zhí)行，而關(guān)掉這些對話框后代碼又會恢復執(zhí)行趾牧。
//使用alert()生成“警告”對話框
alert("Hello World肯污！");
//調(diào)用confirm()方法生成確認框，包含【確認】和【取消】
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}
/**調(diào)用prompt()方法生成“提示”框,提示框中除了包含【確認】和【取消】外哄芜，還會顯示一個文本輸入域忠烛，以供用戶在其中輸入內(nèi)容权逗。
prompt()方法接受兩個參數(shù)：要顯示給用戶的文本提示和文本輸入域的默認值（可以是一個空字符串）斟薇。**/
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}
- 如果當前腳本在執(zhí)行過程中會打開兩個或多個對話框，那么從第二個對話框開始胯陋，每個對話框中都會顯示一個復選框袱箱，以便用戶阻止后續(xù)的對話框顯示发笔，除非用戶刷新頁面。
- 還有兩個可以通過JavaScript打開的對話框捻激，即“查找”和“打印”前计。這兩個對話框都是異步顯示的男杈，能夠?qū)⒖刂茩?quán)立即交還給腳本。
//顯示“打印”對話框
window.print();
//顯示“查找”對話框
window.find();
好好學習
