原生js學習筆記5——BOM操做javascript
什麼是BOMhtml
BOM：Browser Object Model 是瀏覽器對象模型，瀏覽器對象模型提供了獨立與內容的、能夠與瀏覽器窗口進行互動的對象結構，BOM由多個對象構成，其中表明瀏覽器窗口的window對象是BOM的頂層對象，其餘對象都是該對象的子對象。java
目前主流瀏覽器介紹瀏覽器
• IE——11: 國內用得最多的IE瀏覽器，從來對W3C標準支持差。從IE10開始支持ES6標準；cookie
• Sarafi：Apple的Mac系統自帶的基於Webkit內核的瀏覽器，從OS X 10.7 Lion自帶的6.1版本開始支持ES6，目前最新的OS X 10.10 Yosemite自帶的Sarafi版本是8.x，早已支持ES6；app
• Firefox：Mozilla本身研製的Gecko內核和JavaScript引擎OdinMonkey。早期的Firefox按版本發佈，後來終於聰明地學習Chrome的作法進行自升級，時刻保持最新；函數
• 移動設備上目前iOS和Android兩大陣營分別主要使用Apple的Safari和Google的Chrome，因爲二者都是Webkit核心，結果HTML5首先在手機上全面普及（桌面絕對是Microsoft拖了後腿），對JavaScript的標準支持也很好，最新版本均支持ES6。工具
這裏爲何沒有說到360瀏覽器、搜狗瀏覽器呢？其實這一類瀏覽器只是在以上列舉出來的瀏覽器的內核基礎上，換了一個包裝，添加了一些個性功能而已，本質上並無什麼區別。post
能夠操做的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 八、七、六、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>
</body></html>
注意
來自 navigator 對象的信息具備誤導性，不該該被用於檢測瀏覽器版本，這是由於：
• navigator 數據可被瀏覽器使用者更改
• 瀏覽器沒法報告晚於瀏覽器發佈的新操做系統
screen
screen對象表示屏幕的信息，經常使用的屬性有：
• screen.width：屏幕寬度，以像素爲單位；
• screen.availWidth：屏幕的可用寬度，以像素爲單位
• screen.height：屏幕高度，以像素爲單位；
• screen.availHeight：屏幕的可用高度，以像素爲單位
• screen.colorDepth：返回顏色位數，如八、1六、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獲取:
<script>
document.write(location.href);
</script>
要得到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()">
</body></html>
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()">
</body></html>
History Forward
history forward() 方法加載歷史列表中的下一個 URL。
這與在瀏覽器中點擊前進按鈕是相同的：
<html><head><script>function goForward()
{
window.history.forward()
}</script></head><body>
<input type="button" value="Forward" onclick="goForward()">
</body></html>
注意
這個對象屬於歷史遺留對象，對於現代Web頁面來講，因爲大量使用AJAX和頁面交互，簡單粗暴地調用history.back()可能會讓用戶感到很是憤怒。
新手開始設計Web頁面時喜歡在登陸頁登陸成功時調用history.back()，試圖回到登陸前的頁面。這是一種錯誤的方法。
任何狀況，你都不該該使用history這個對象了。
拓展
系統對話框
• alert()警告框，沒有返回值
• confirm('提問的內容')返回boolean
• prompt(),輸入框,返回字符串或null
window對象經常使用事件
• onload：當頁面加載時
• onscroll：當頁面滾動時
• onresize:頁面從新定義大小時