藍鷗原生JS：什麼是BOM及BOM操作
零基礎學習HTML5—HTML+CSS基礎視訊教程
什麼是BOM
BOM：Browser Object Model 是浏覽器對象模型，浏覽器對象模型提供了獨立與内容的、可以與浏覽器視窗進行互動的對象結構，BOM由多個對象構成，其中代表浏覽器視窗的window對象是BOM的頂層對象，其他對象都是該對象的子對象。
目前主流浏覽器介紹
IE——11: 國内用得最多的IE浏覽器，曆來對W3C标準支援差。從IE10開始支援ES6标準；
Sarafi：Apple的Mac系統自帶的基于Webkit核心的浏覽器，從OS X 10.7 Lion自帶的6.1版本開始支援ES6，目前最新的OS X 10.10 Yosemite自帶的Sarafi版本是8.x，早已支援ES6；
Firefox：Mozilla自己研制的Gecko核心和JavaScript引擎OdinMonkey。早期的Firefox按版本釋出，後來終于聰明地學習Chrome的做法進行自更新，時刻保持最新；
移動裝置上目前iOS和Android兩大陣營分别主要使用Apple的Safari和Google的Chrome，由于兩者都是Webkit核心，結果HTML5首先在手機上全面普及（桌面絕對是Microsoft拖了後腿），對JavaScript的标準支援也很好，最新版本均支援ES6。
這裡為什麼沒有說到360浏覽器、搜狗浏覽器呢？其實這一類浏覽器隻是在以上列舉出來的浏覽器的核心基礎上，換了一個包裝，添加了一些個×××而已，本質上并沒有什麼差別。
可以操作的BOM對象
window對象
所有浏覽器都支援 window 對象。它表示浏覽器視窗。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一：
window.document.getElementById("header");
與此相同：
document.getElementById("header");
window尺寸
有三種方法能夠确定浏覽器視窗的尺寸（浏覽器的視口，不包括工具欄和滾動條）。
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏覽器視窗的内部高度
window.innerWidth - 浏覽器視窗的内部寬度
對于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
實用的 JavaScript 方案（涵蓋所有浏覽器）：
<!DOCTYPE html><html><body>
<p id="demo"></p>
<script>var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏覽器的内部視窗寬度：" + w + "，高度：" + h + "。"</script>
</body></html>
該例顯示浏覽器視窗的高度和寬度：（不包括工具欄/滾動條）
除此之外，還有一個outerWidth和outerHeight屬性，可以擷取浏覽器視窗的整個寬高。
其他操作window方法（不常用）
window.open() - 打開新視窗
window.close() - 關閉目前視窗
window.moveTo() - 移動目前視窗
window.resizeTo() - 調整目前視窗的尺寸
navigator
navigator對象表示浏覽器的資訊，最常用的屬性包括：
navigator.appName：浏覽器名稱；
navigator.appVersion：浏覽器版本；
navigator.language：浏覽器設定的語言；
navigator.platform：作業系統類型；
navigator.userAgent：浏覽器設定的User-Agent字元串。
window.navigator 對象在編寫時可不使用 window 這個字首。
示例：
<!DOCTYPE html><html><body><div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
注意
來自 navigator 對象的資訊具有誤導性，不應該被用于檢測浏覽器版本，這是因為：
navigator 資料可被浏覽器使用者更改
浏覽器無法報告晚于浏覽器釋出的新作業系統
screen
screen對象表示螢幕的資訊，常用的屬性有：
screen.width：螢幕寬度，以像素為機關；
screen.availWidth：螢幕的可用寬度，以像素為機關
screen.height：螢幕高度，以像素為機關；
screen.availHeight：螢幕的可用高度，以像素為機關
screen.colorDepth：傳回顔色位數，如8、16、24。
window.screen 對象在編寫時可以不使用 window 這個字首。
<script type="text/javascript">document.write( "螢幕寬度："+screen.width+"px<br />" );document.write( "螢幕高度："+screen.height+"px<br />" );document.write( "螢幕可用寬度："+screen.availWidth+"px<br />" );document.write( "螢幕可用高度："+screen.availHeight+"px" );</script>
Location
location對象表示目前頁面的URL資訊。例如，一個完整的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href擷取:
document.write(location.href);
要獲得URL各個部分的值，可以這麼寫:
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加載一個新頁面，可以調用location.assign()。如果要重新加載目前頁面，調用location.reload()方法非常友善。
示例：加載一個新頁面
<!DOCTYPE html><html><head><script>function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}</script></head><body>
<input type="button" value="加載新文檔" onclick="newDoc()">
History
history對象儲存了浏覽器的曆史記錄，JavaScript可以調用history對象的back()或forward ()，相當于使用者點選了浏覽器的“後退”或“前進”按鈕。
History Back
history.back() 方法加載曆史清單中的前一個 URL。
這與在浏覽器中點選後退按鈕是相同的：
<html><head><script>function goBack()
{
window.history.back()
}</script></head><body>
<input type="button" value="Back" onclick="goBack()">
History Forward
history forward() 方法加載曆史清單中的下一個 URL。
這與在浏覽器中點選前進按鈕是相同的：
<html><head><script>function goForward()
window.history.forward()
<input type="button" value="Forward" onclick="goForward()">
這個對象屬于曆史遺留對象，對于現代Web頁面來說，由于大量使用AJAX和頁面互動，簡單粗暴地調用history.back()可能會讓使用者感到非常憤怒。
新手開始設計Web頁面時喜歡在登入頁登入成功時調用history.back()，試圖回到登入前的頁面。這是一種錯誤的方法。
任何情況，你都不應該使用history這個對象了。
拓展
系統對話框
alert()警告框，沒有傳回值
confirm('提問的内容')傳回boolean
prompt(),輸入框,傳回字元串或null
window對象常用事件
onload：當頁面加載時