溫故js系列（11）-BOM

前端學習：教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總

歡迎提issues斧正：BOM

JavaScript-BOM

BOM是browser object model的縮寫，簡稱瀏覽器對象模型。它自己是沒有標準的或者尚未哪一個組織去標準它，因此，BOM缺少標準。它提供了不少對象，而且每一個對象都提供了不少方法與屬性，用於訪問瀏覽器的功能。

window對象

BOM的核心對象是window，它表示瀏覽器的一個實例，主要用於管理窗口與窗口之間的通信。window 對象處於JavaScript結構的最頂層，對於每一個打開的窗口，系統都會自動爲其定義window 對象。F12打開console,輸入window,便可看到window的全部屬性和方法。太多了，不少是不須要咱們去深刻了解的。

window 對象的屬性

屬性                         含義
closed                 當窗口關閉時爲真
defaultStatus          窗口底部狀態欄顯示的默認狀態消息
document               窗口中當前顯示的文檔對象
frames                 窗口中的框架對象數組
history                保存着窗口最近加載的URL
length                 窗口中的框架數
location               當前窗口的URL
name                   窗口名
offscreenBuffering     用於繪製新窗口內容並在完成後複製已存在的內容，控制屏幕更新
opener                 打開當前窗口的窗口
parent                 指向包含另外一個窗口的窗口（由框架使用）
screen                 顯示屏幕相關信息，如高度、寬度（以像素爲單位）
self                   指示當前窗口。
status                 描述由用戶交互致使的狀態欄的臨時消息
top                    包含特定窗口的最頂層窗口（由框架使用）
window                 指示當前窗口，與self 等效

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

window 對象的方法

方法                                 功能
alert(text)                  建立一個警告對話框，顯示一條信息
blur()                       將焦點從窗口移除
clearInterval(interval)      清除以前設置的定時器間隔
clearTimeOut(timer)          清除以前設置的超時
close()                      關閉窗口
confirm()                    建立一個須要用戶確認的對話框
focus()                      將焦點移至窗口
open(url,name,[options])     打開一個新窗口並返回新window 對象
prompt(text,input)           建立一個對話框要求用戶輸入信息
scroll(x,y)                  在窗口中滾動到一個像素點的位置
moveBy(x,y)                  按照給定像素參數移動指定窗口,x,y表明水平位移量和垂直位移量
moveTo(x,y)                  將窗口移動到指定的指定座標(x,y)處
resizeBy(x,y)                將當前窗口改變指定的大小(x,y)，當x、y的值大於0時爲擴大，小於0時爲縮小
resizeTo(x,y)                將當前窗口改變大小，x、y分別爲寬度和高度
print()                      調出打印對話框
find()                       調出查找對話框
setInterval(func,time)       通過指定時間間執行代碼
clearInterval("id");         取消setInterval    
setTimeout(func,time)        在定時器超事後執行代碼
clearTimeout("id");          取消還未執行的setTimeout

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

window屬性-窗口的位置和大小

窗口的位置，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 頁面高度+邊框
//縮小窗口數據就會有變化

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

document.documentElement.clientWidth
document.documentElement.clientHeight

固然，這是標準模式下，還要兼容怪異模式：

document.body.clientWidth; //非標準模式使用body
document.body.clientHeight;

window方法-系統對話框

瀏覽器經過alert()、confirm()和prompt()方法能夠調用系統對話框向用戶顯示信息。

alert()

alert('xzavier warning');

直接彈出彈框，彈框只有肯定和關閉按鈕。
通常用於用戶交互時作出提示，不過這種方法的用戶體驗不是很好，如今都流行使用業務須要的用戶體驗好的彈窗。
另外，之前經常使用於調試代碼，但如今基本不用了。由於它很煩，彈一個要關一個。若是調試代碼後忘記關掉，還會給用戶帶來較差的體驗。如今都用console，在控制檯打印，研發人員能夠很方便的看到調試信息，也不用去關閉彈窗之類的，就算一時疏忽忘記刪掉調試代碼，也不會影響到用戶體驗。

confirm()

confirm('confirm or cancel');

肯定和取消彈框，按肯定返回true，按取消或者關閉按鈕返回false。

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

prompt()

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

輸入提示框，帶兩個參數，一個提示，一個值。按肯定返回輸入值，不填返回空，按取消或者關閉按鈕返回null。

window方法-新建窗口

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

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

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

字符串參數：

屬性         值             說明
width       數值      新窗口的寬度 ，不能小於100
height      數值      新窗口的高度，不能小於100
top         數值      新窗口的Y座標，不能是負值
left        數值      新窗口的X座標，不能是負值
location   yes/no    是否在瀏覽器窗口中顯示地址欄，不一樣瀏覽器默認值不一樣
menubar    yes/no    是否在瀏覽器窗口顯示菜單欄，默認爲no
resizable  yes/no    是否能夠經過拖動瀏覽器窗口的邊框改變大小，默認爲no
scrollbars yes/no    若是內容在頁面中顯示不下，是否容許滾動，默認爲no
status     yes/no    是否在瀏覽器窗口中顯示狀態欄，默認爲no
toolbar    yes/no    是否在瀏覽器窗口中顯示工具欄，默認爲no

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

window方法-setTimeout和setInterval

JavaScript是單線程語言，它容許經過設置超時值和間歇時間值來調度代碼在特定的時刻執行。setTimeout在指定的時間事後執行代碼，setInterval是每隔指定的時間就執行一次代碼。

setTimeout

接受兩個參數：要執行的代碼和超時時間（單位：毫秒）

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

setTimeout()返回一個數值ID，表示這個超時調用。這個ID是超時調用的惟一標識符，能夠經過它來取消超時調用。要取消還沒有執行的超時調用，能夠調用clearTimeout()方法並將相應的超時調用ID做爲參數傳遞給它。

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

setInterval

setInterval按照指定的時間間隔重複執行代碼，直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval()，接受參數：要執行的代碼和每次執行以前須要等待的毫秒數

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

取消間歇調用方法和取消超時調用相似，使用clearInterval()方法。但取消間歇調用的重要性要遠遠高於取消超時調用，由於在不加干涉的狀況下，間歇調用將會一直執行到頁面關閉。

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

通常來講，使用了setInterval就必定要使用clearInterval去清除，因此，使用超時調用來模擬間歇調用是一種最佳模式。由於，使用超時調用時，不必跟蹤超時調用ID，由於每次執行代碼以後，若是再也不設置另外一次超時調用，調用就會自行中止。

location對象

location是BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息。location對象是window對象的屬性，也是document對象的屬性。因此window.location和document.location等效。

location 對象的屬性

屬性        描述的URL內容
host        主機名：端口號
hostname    主機名
href        URL
pathname    路徑名
port        端口號
protocol    協議部分
search      查詢字符串
hash        若是該部分存在，表示錨點部分

location 對象的方法

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

F12打開調試器，console下打印window.location便可查看location的屬性和方法。

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

navigator對象

navigator對象，其實也是window對象的屬性，包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用。

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 代碼爲基礎的瀏覽器中，它的值是 "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);  
//安裝在瀏覽器中的插件數組  PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5}

history對象

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

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

screen對象

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

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

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