摘要：確定和取消彈框，按確定返回，按取消或者關(guān)閉按鈕返回。官方瀏覽器名返回所使用瀏覽器的名稱。對象有一個屬性，表示對象中的記錄數(shù)。屬性描述屏幕的寬度屏幕的高度窗口可以使用的屏幕的寬度窗口可以使用的屏幕的高度對象見溫故系列

前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：BOM

BOM是browser object model的縮寫，簡稱瀏覽器對象模型。它本身是沒有標(biāo)準(zhǔn)的或者還沒有哪個組織去標(biāo)準(zhǔn)它，所以，BOM缺乏標(biāo)準(zhǔn)。它提供了很多對象，并且每個對象都提供了很多方法與屬性，用于訪問瀏覽器的功能。

BOM的核心對象是window，它表示瀏覽器的一個實例，主要用于管理窗口與窗口之間的通訊。window 對象處于JavaScript結(jié)構(gòu)的最頂層，對于每個打開的窗口，系統(tǒng)都會自動為其定義window 對象。F12打開console,輸入window,即可看到window的所有屬性和方法。太多了，很多是不需要我們?nèi)ド钊肓私獾摹?/p> window 對象的屬性

屬性                         含義
closed                 當(dāng)窗口關(guān)閉時為真
defaultStatus          窗口底部狀態(tài)欄顯示的默認(rèn)狀態(tài)消息
document               窗口中當(dāng)前顯示的文檔對象
frames                 窗口中的框架對象數(shù)組
history                保存著窗口最近加載的URL
length                 窗口中的框架數(shù)
location               當(dāng)前窗口的URL
name                   窗口名
offscreenBuffering     用于繪制新窗口內(nèi)容并在完成后復(fù)制已存在的內(nèi)容，控制屏幕更新
opener                 打開當(dāng)前窗口的窗口
parent                 指向包含另一個窗口的窗口（由框架使用）
screen                 顯示屏幕相關(guān)信息，如高度、寬度（以像素為單位）
self                   指示當(dāng)前窗口。
status                 描述由用戶交互導(dǎo)致的狀態(tài)欄的臨時消息
top                    包含特定窗口的最頂層窗口（由框架使用）
window                 指示當(dāng)前窗口，與self 等效

要驗證這些屬性，直接F12打開console，驗證即可。

方法                                 功能
alert(text)                  創(chuàng)建一個警告對話框，顯示一條信息
blur()                       將焦點從窗口移除
clearInterval(interval)      清除之前設(shè)置的定時器間隔
clearTimeOut(timer)          清除之前設(shè)置的超時
close()                      關(guān)閉窗口
confirm()                    創(chuàng)建一個需要用戶確認(rèn)的對話框
focus()                      將焦點移至窗口
open(url,name,[options])     打開一個新窗口并返回新window 對象
prompt(text,input)           創(chuàng)建一個對話框要求用戶輸入信息
scroll(x,y)                  在窗口中滾動到一個像素點的位置
moveBy(x,y)                  按照給定像素參數(shù)移動指定窗口,x,y代表水平位移量和垂直位移量
moveTo(x,y)                  將窗口移動到指定的指定坐標(biāo)(x,y)處
resizeBy(x,y)                將當(dāng)前窗口改變指定的大小(x,y)，當(dāng)x、y的值大于0時為擴大，小于0時為縮小
resizeTo(x,y)                將當(dāng)前窗口改變大小，x、y分別為寬度和高度
print()                      調(diào)出打印對話框
find()                       調(diào)出查找對話框
setInterval(func,time)       經(jīng)過指定時間間執(zhí)行代碼
clearInterval("id");         取消setInterval    
setTimeout(func,time)        在定時器超過后執(zhí)行代碼
clearTimeout("id");          取消還未執(zhí)行的setTimeout

window下的屬性和方法，可以使用window.屬性、window.方法()或者直接屬性、方法()的方式調(diào)用。下面簡要介紹幾個。

窗口的位置，IE、Safari、Opera 和Chrome都提供了screenLeft 和screenTop 屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。firefox 則在screenX 和screenY 屬性中提供相同的窗口位置信息，Safari 和Chrome 也同時支持這兩個屬性。

console.log(screenLeft);   //102, fireFox下輸出screenLeft is not defined
console.log(screenX);      //102

兼容：

var leftX = (typeof screenLeft == "number") ? screenLeft : screenX;
var topY = (typeof screenTop == "number") ? screenTop : screenY;

窗口頁面大小，IE、Firefox、Safari、Opera 和Chrome 均為此提供了4 個屬性：innerWidth和innerHeight，返回瀏覽器窗口本身的尺寸；outerWidth 和outerHeight，返回瀏覽器窗口本身及邊框的尺寸。

console.log(innerWidth);  //1366 頁面寬度
console.log(innerHeight); //681 頁面高度
console.log(outerWidth);  //1366 頁面長度+邊框
console.log(outerHeight); //768 頁面高度+邊框
//縮小窗口數(shù)據(jù)就會有變化

舊的IE版本沒有提供當(dāng)前瀏覽器窗口尺寸的屬性。不過，DOM有提供相關(guān)的方法：

document.documentElement.clientWidth
document.documentElement.clientHeight

當(dāng)然，這是標(biāo)準(zhǔn)模式下，還要兼容怪異模式：

document.body.clientWidth; //非標(biāo)準(zhǔn)模式使用body
document.body.clientHeight;

瀏覽器通過alert()、confirm()和prompt()方法可以調(diào)用系統(tǒng)對話框向用戶顯示信息。

alert("xzavier warning");

直接彈出彈框，彈框只有確定和關(guān)閉按鈕。
一般用于用戶交互時做出提示，不過這種方法的用戶體驗不是很好，現(xiàn)在都流行使用業(yè)務(wù)需要的用戶體驗好的彈窗。
另外，以前常用于調(diào)試代碼，但現(xiàn)在基本不用了。因為它很煩，彈一個要關(guān)一個。如果調(diào)試代碼后忘記關(guān)掉，還會給用戶帶來較差的體驗。現(xiàn)在都用console，在控制臺打印，研發(fā)人員可以很方便的看到調(diào)試信息，也不用去關(guān)閉彈窗之類的，就算一時疏忽忘記刪掉調(diào)試代碼，也不會影響到用戶體驗。

confirm("confirm or cancel");  

確定和取消彈框，按確定返回true，按取消或者關(guān)閉按鈕返回false。

if (confirm("confirm or cancel")) { 
    alert("you confirmed"); 
} else {
    alert("you canceled");
} 

prompt("please input a number", 0);

輸入提示框，帶兩個參數(shù)，一個提示，一個值。按確定返回輸入值，不填返回空，按取消或者關(guān)閉按鈕返回null。

window.open()方法可以導(dǎo)航到一個特定的URL，也可以打開一個新的瀏覽器窗口。它可以接受四個參數(shù)：
1.要加載的URL
2.窗口的名稱或窗口目標(biāo)
3.一個字符串參數(shù)，表示新窗口的長寬等屬性值
4.一個表示新頁面是否取代瀏覽器記錄中當(dāng)前加載頁面的布爾值。

open("https://segmentfault.com/blog/xzavier"); //新建頁面并打開
open("https://segmentfault.com/blog/xzavier","xzavier"); //新建頁面并命名窗口并打開
open("https://segmentfault.com/blog/xzavier","_parent"); //在本頁窗口打開

target 屬性：
blank - 在一個新的未命名的窗口載入文檔
_self - 在相同的框架或窗口中載入目標(biāo)文檔
_parent - 把文檔載入父窗口或包含了超鏈接引用的框架的框架集
_top - 把文檔載入包含該超鏈接的窗口,取代任何當(dāng)前正在窗口中顯示的框架

字符串參數(shù)：

屬性         值             說明
width       數(shù)值      新窗口的寬度 ，不能小于100
height      數(shù)值      新窗口的高度，不能小于100
top         數(shù)值      新窗口的Y坐標(biāo)，不能是負(fù)值
left        數(shù)值      新窗口的X坐標(biāo)，不能是負(fù)值
location   yes/no    是否在瀏覽器窗口中顯示地址欄，不同瀏覽器默認(rèn)值不同
menubar    yes/no    是否在瀏覽器窗口顯示菜單欄，默認(rèn)為no
resizable  yes/no    是否可以通過拖動瀏覽器窗口的邊框改變大小，默認(rèn)為no
scrollbars yes/no    如果內(nèi)容在頁面中顯示不下，是否允許滾動，默認(rèn)為no
status     yes/no    是否在瀏覽器窗口中顯示狀態(tài)欄，默認(rèn)為no
toolbar    yes/no    是否在瀏覽器窗口中顯示工具欄，默認(rèn)為no

open("https://segmentfault.com/blog/xzavier","xzavier","width=600,height=400,top=200,left=400,resizable=yes");
//類似一個彈窗彈出一個網(wǎng)頁，open有返回值，返回window對象

JavaScript是單線程語言，它允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行。setTimeout在指定的時間過后執(zhí)行代碼，setInterval是每隔指定的時間就執(zhí)行一次代碼。

接受兩個參數(shù)：要執(zhí)行的代碼和超時時間（單位：毫秒）

function timer() {
    console.log("xzavier"s timer");
}
setTimeout(timer, 2000);

setTimeout()返回一個數(shù)值ID，表示這個超時調(diào)用。這個ID是超時調(diào)用的唯一標(biāo)識符，可以通過它來取消超時調(diào)用。要取消尚未執(zhí)行的超時調(diào)用，可以調(diào)用clearTimeout()方法并將相應(yīng)的超時調(diào)用ID作為參數(shù)傳遞給它。

function timer() {
    console.log("xzavier"s timer");
}
var xzavier = setTimeout(timer, 2000);
clearTimeout(xzavier);  //取消超時調(diào)用不執(zhí)行

setInterval按照指定的時間間隔重復(fù)執(zhí)行代碼，直至間歇調(diào)用被取消或者頁面被卸載。設(shè)置間歇調(diào)用的方法是setInterval()，接受參數(shù)：要執(zhí)行的代碼和每次執(zhí)行之前需要等待的毫秒數(shù)

setInterval(function () {
    console.log("xzavier");
}, 2000);

取消間歇調(diào)用方法和取消超時調(diào)用類似，使用clearInterval()方法。但取消間歇調(diào)用的重要性要遠(yuǎn)遠(yuǎn)高于取消超時調(diào)用，因為在不加干涉的情況下，間歇調(diào)用將會一直執(zhí)行到頁面關(guān)閉。

var xzavier = setInterval(function () { 
    console.log("xzavier");
}, 1000);
clearInterval(xzavier);

一般來說，使用了setInterval就一定要使用clearInterval去清除，所以，使用超時調(diào)用來模擬間歇調(diào)用是一種最佳模式。因為，使用超時調(diào)用時，沒必要跟蹤超時調(diào)用ID，因為每次執(zhí)行代碼之后，如果不再設(shè)置另一次超時調(diào)用，調(diào)用就會自行停止。

location是BOM對象之一，它提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息。location對象是window對象的屬性，也是document對象的屬性。所以window.location和document.location等效。

屬性        描述的URL內(nèi)容
host        主機名：端口號
hostname    主機名
href        URL
pathname    路徑名
port        端口號
protocol    協(xié)議部分
search      查詢字符串
hash        如果該部分存在，表示錨點部分

方法           功能
assign()  跳轉(zhuǎn)到指定頁面，與href等效
reload()  重載當(dāng)前URL
repalce() 用新的URL 替換當(dāng)前頁面

F12打開調(diào)試器，console下打印window.location即可查看location的屬性和方法。

location.reload();        //最有效的重新加載，有可能從緩存加載
location.reload(true);    //強制加載，從服務(wù)器源頭重新加載
location.assign("https://segmentfault.com/blog/xzavier");  //跳轉(zhuǎn)到指定的URL
location.replace("https://segmentfault.com/blog/xzavier"); //可以避免產(chǎn)生跳轉(zhuǎn)前的歷史記錄，跳轉(zhuǎn)后瀏覽器不能返回上一個頁面

navigator對象，其實也是window對象的屬性，包含大量有關(guān)Web瀏覽器的信息，在檢測瀏覽器及操作系統(tǒng)上非常有用。

console.log(navigator.userAgent);  
//用戶代理頭信息，很多時候用于判斷瀏覽器  Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.appCodeName);  
//瀏覽器代碼名 Mozilla 
//appCodeName 屬性是一個只讀字符串，聲明了瀏覽器的代碼名。
//在所有以 Netscape 代碼為基礎(chǔ)的瀏覽器中，它的值是 "Mozilla"。
//為了兼容起見，在 Microsoft 的瀏覽器中，它的值也是 "Mozilla"。
console.log(navigator.appName);  
//官方瀏覽器名 Netscape
//appName返回所使用瀏覽器的名稱。該屬性并不一定能返回正確的瀏覽器名稱。
//在基于 Gecko 的瀏覽器 （例如 Firefox）和基于 WebKit 的瀏覽器
//（例如 Chrome 和 Safari）中，返回的瀏覽器名稱都是 "Netscape". 
console.log(navigator.appVersion);  
//瀏覽器版本信息  5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
console.log(navigator.cookieEnabled);  
//是否啟用cookie，返回true/false  
console.log(navigator.javaEnabled);  
//是否啟用java，返回true/false  
console.log(navigator.platform);  Win32
//瀏覽器所在計算機平臺  
console.log(navigator.plugins);  
//安裝在瀏覽器中的插件數(shù)組  PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

history對象是window 對象的屬性，它保存著用戶上網(wǎng)的記錄，從窗口被打開的那一刻算起。
history對象有一個length屬性，表示history 對象中的記錄數(shù)。history對象有三個方法。

方法                     功能
back()       前往瀏覽器歷史條目前一個URL，類似后退
forward()    前往瀏覽器歷史條目下一個URL，類似前進
go(number)   跳轉(zhuǎn)指定歷史記錄的URL

screen對象是window 對象的屬性,用于獲取屏幕的信息。

屬性             描述
width        屏幕的寬度 
height       屏幕的高度 
availWidth   窗口可以使用的屏幕的寬度
availHeight  窗口可以使用的屏幕的高度

document對象見： 溫故js系列-DOM