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

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

歡迎提issues斧正：BOM

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

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

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

要驗(yàn)證這些屬性，直接F12打開(kāi)console，驗(yàn)證即可。

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

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

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

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;

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

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

舊的IE版本沒(méi)有提供當(dāng)前瀏覽器窗口尺寸的屬性。不過(guò)，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;

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

alert("xzavier warning");

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

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);

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

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

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

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

字符串參數(shù)：

屬性         值             說(shuō)明
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    是否可以通過(guò)拖動(dòng)瀏覽器窗口的邊框改變大小，默認(rèn)為no
scrollbars yes/no    如果內(nèi)容在頁(yè)面中顯示不下，是否允許滾動(dòng)，默認(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");
//類(lèi)似一個(gè)彈窗彈出一個(gè)網(wǎng)頁(yè)，open有返回值，返回window對(duì)象

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

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

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

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

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

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

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

取消間歇調(diào)用方法和取消超時(shí)調(diào)用類(lèi)似，使用clearInterval()方法。但取消間歇調(diào)用的重要性要遠(yuǎn)遠(yuǎn)高于取消超時(shí)調(diào)用，因?yàn)樵诓患痈缮娴那闆r下，間歇調(diào)用將會(huì)一直執(zhí)行到頁(yè)面關(guān)閉。

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

一般來(lái)說(shuō)，使用了setInterval就一定要使用clearInterval去清除，所以，使用超時(shí)調(diào)用來(lái)模擬間歇調(diào)用是一種最佳模式。因?yàn)?，使用超時(shí)調(diào)用時(shí)，沒(méi)必要跟蹤超時(shí)調(diào)用ID，因?yàn)槊看螆?zhí)行代碼之后，如果不再設(shè)置另一次超時(shí)調(diào)用，調(diào)用就會(huì)自行停止。

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

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

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

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

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

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

console.log(navigator.userAgent);  
//用戶代理頭信息，很多時(shí)候用于判斷瀏覽器  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 屬性是一個(gè)只讀字符串，聲明了瀏覽器的代碼名。
//在所有以 Netscape 代碼為基礎(chǔ)的瀏覽器中，它的值是 "Mozilla"。
//為了兼容起見(jiàn)，在 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
//瀏覽器所在計(jì)算機(jī)平臺(tái)  
console.log(navigator.plugins);  
//安裝在瀏覽器中的插件數(shù)組  PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

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

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

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

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

document對(duì)象見(jiàn)： 溫故js系列-DOM