BOM
BOM，全程Browser Object Model， 也叫瀏覽器對象模型，它提供了很多對象，通過這些對象，可以獲得瀏覽器的屬性，並操作這些屬性
BOM的總對象叫做window，其他所有對象都是它的子對象
大致包含這些：document（也就是常說的DOM，又叫文檔對象），frames（框架對象），location（URL對象），history（瀏覽歷史記錄對象），navigator（瀏覽器對象），screen（顯示器對象）
頂層對象window
- 表示一個瀏覽器窗口
- 提供了處理瀏覽器窗口的屬性和方法
window有雙重角色，除了提供訪問瀏覽器屬性的接口，也是JavaScript離得Global對象，因此所有在全局作用域中聲明的變量，函數都回變成window對象的屬性和方法
示例：
var test='aaa'
window.test; //aaa
window窗口位置
| 屬性 | 說明 | 谷歌瀏覽器 | IE瀏覽器 | 火狐瀏覽器 |
| screenLeft | 窗口相對於屏幕左邊的值 | 支持 | 支持 | |
| screenTop | 窗口相對於屏幕上邊的值 | 支持 | 支持 | |
| screenX | 窗口相對於屏幕左邊的值 | 支持 | ||
| screenY | 窗口相對於屏幕上邊的值 | 支持 |
因此獲取窗口距離屏幕左側的值我們可以寫成
var letf = (typeof window.screenLeft == 'number')?window.screenLeft : window.secrrenX
操作窗口位置
- moveTo(x,y)：將窗口移動到一個新的位置。x，y表示新位置的座標值
- moveBy(x,y)：將窗口相對於現在的位置移動到一個新位置。x，y表示水平和垂直方法上移動的像素
window窗口的大小
獲取瀏覽器大小：outerWidth，outerHeight
獲取內容區域的大小：innerWidth，innerHeight
調整窗口大小
方法有：
resizeTo(x,y)：x，y表示新窗口的寬和高
resuzeBy(x,y)：x，y表示原窗口和新窗口的高度差
窗口的打開和關閉
方法：
open：打開新窗口
close：關閉當前窗口或某個引用窗口
window.open(url,windowName,[windowFeateure])
-打開一個新窗口或查找一個已命名的窗口
- url：在新窗口中打開的url
- windowName：新窗口的名字
- windowFeateure：新窗口的設置描述字符串，可以設置新窗口的位置，尺寸，工具欄，窗口功能等
返回值是一個window對象
示例：
var mw = window.open(
'http://www.cc6608.html',
'尹dasd',
'height=500,width=600,top=50,left=50'
)
mw.resizeTo(600,600)
mw.moveTo(100,100)
window.close()
關閉當前窗口或者某個引用窗口，該方法無參數，沒有返回值
window.close() //關閉當前窗口
var mw = window.open(
'http://www.cc6608.html',
'尹dasd',
'height=500,width=600,top=50,left=50'
)
mw.close(); //關閉mw窗口
window系統對話框
alert()，confirm()，prompt()
window定時器
setTimeout：等待一段時間後執行處理函數
示例：間隔2秒後執行函數，也可以通過clearTimeout清除定時器
var timeout=setTimeout(function () {
console.log(123);
},2000)
clearTimeout(timeout)
setInterval：循環，每隔一段時間，執行處理函數
示例：每隔2秒執行一次函數，也可以手動清除循環定時器
var intervalId=setInterval(function () {
console.log(123);
},2000)
clearTimeout(intervalId)
window事件
load事件：瀏覽器窗口加載完畢時觸發
window.οnlοad=function(){
console.log(‘onload’);
//處理函數
}
resize事件：當窗口大小改變時觸發
window.οnresize=function(){
console.log('onresize');
//處理函數
}
error事件：瀏覽器腳本發生錯誤時觸發
window.onError(message,source.lineno,colno,error)
- message：錯誤信息（字符串）
- source：發生錯誤的腳本URL（字符串）
- lineno：發送錯誤的行號（數字）
- colno：發生錯誤的列號（數字）
- error：Error對象
window.onError=function(msg,source,lineno,colno,error){
console.log('onError');
//處理函數
}
window窗口引用
- top：頂層窗口，即最上層的那個窗口
- parent：父窗口
- self：當前窗口，即自身
frames對象
是以集合的方式返回當前窗口中包含的框架，注意，frame是框架不可以和body共同使用
<!DOCTYPE html>
<html>
<!-- <frameset cols="25%,*,25%">
<frame src="shuxing.html">
<frame src="wendang.html">
<frame src="http://study.163.com">
</frameset> -->
<frameset rows='200,*'>
<frame src='shuxing.html' name='topFrame' />
<frameset cols='50%,50%'>
<frame src='wendang.html' name='leftFrame' />
<frame src='http://study.163.com' name='bottomFrame' />
</frameset>
</frameset>
</html>
navigator
識別客戶端瀏覽器信息
主要屬性有
| 屬性 | 說明 |
| appCodeName | 瀏覽器名稱，一般都是Mozilla |
| appName | 完整的瀏覽器名稱 |
| appVersion | 瀏覽器的版本號 |
| language | 用戶使用的語言 |
| mineTypes | 在瀏覽器中註冊的MiME類型數組 |
| platform | 瀏覽器所在的系統平臺 |
| plugins | 瀏覽器中安裝的插件信息數組 |
| userAgent | 瀏覽器的用戶代理字符串 |
例如：
/win/i.test(navigator.platform); //判斷是否是windows系統，i表示不區分大小寫
/wekeit/i.test(navigator.userAgent) //判斷是否是wekeit內核，i表示不區分大小寫
location
提供了與當前窗口中加載文檔URL的有關信息
屬性詳解
示例URL地址：http://mooc.study.163.com:80/course?tid=2001472026#/info
整個鏈接，http://mooc.study.163.com:80/course?tid=2001472026#/info，我們稱作，href
- http，稱作protocol
- mooc.study.com：80，稱作host，由hostname和port組成
- mooc.study.com，稱作hostname
- 80，稱作port
- http://mooc.study.163.com:80，稱作origin，由protocol和host組成
- course，到問號前面這一段稱作，pathname
- tid=2001472026，問號到#號之間稱作search值
- /info，#號後面的稱作哈希值，hash
location.assign(url)
載入新的url，瀏覽器會記錄下瀏覽記錄，url：要跳轉的地址
location.repalce(url)
載入新的url，但是瀏覽器不會記錄瀏覽記錄，url：要跳轉的地址
location.reload(forcedReload)
重新加載頁面
forcedReload：是否從服務端重新獲取當前資源，boolean值，true表示從服務的重新重新獲取，不傳或false，可能會從瀏覽器緩存獲取
history對象
瀏覽器當前窗口的瀏覽歷史
主要屬性有
| 屬性 | 說明 |
| length | 用戶歷史會話頁面的數量 |
| state | History堆棧頂部狀態 |
方法
history.back()：返回會話記錄的上一個頁面
history.forward()：返回灰化記錄記錄的下一個頁面
history.go(index)：表示載入會話歷史中的某一個特定頁面，參數index，爲整型或者字符串
history.pushState(state,tittle,url)
在瀏覽器歷史記錄中添加新的記錄
參數
- state：一個與指定網址相關的狀態對象，不需要可以傳null
- tittle：新頁面標題，在瀏覽器中不起左右，一般填null
- url：新的網址，必須與當前頁面處在同一域，瀏覽器的地址欄將顯示這個網址，但也沒不會刷新
history.pushState({page:1},null,'/jiedian.html')
history.state={page:1}
history.replaceState(state,tittle,url)
修改瀏覽器當前記錄
參數
- state：一個與指定網址相關的狀態對象，不需要可以傳null
- tittle：新頁面標題，在瀏覽器中不起左右，一般填null
- url：新的網址，必須與當前頁面處在同一域，瀏覽器的地址欄將顯示這個網址，但也沒不會刷新
history.replaceState({page:1},null,'/jiedian.html')
history.state={page:1}
screen
顯示器屏幕相關信息
| 屬性 | 說明 | 谷歌 | 火狐 | IE |
| availHeight | 屏幕的像素高度減系統部件高度後的值 | 支持 | 支持 | 支持 |
| availWidth | 屏幕的像素寬度減系統部件寬度後的值 | 支持 | 支持 | 支持 |
| availLeft | 違背系統佔用的最左側的像素值 | 支持 | 支持 | |
| availTop | 違背系統佔用的最左上方的像素值 | 支持 | 支持 | |
| colorDept | 用於表示顏色的位置 | 支持 | 支持 | 支持 |
| height | 屏幕像素的高度 | 支持 | 支持 | 支持 |
| width | 屏幕像素的寬度 | 支持 | 支持 | 支持 |
| left | 當前屏幕距離左側的像素距離 | 支持 | ||
| top | 當前的屏幕距離頂部的像素距離 | 支持 |