BOM

什麼是BOM？
BOM：Browser Object Model 是瀏覽器對象模型，瀏覽器對象模型提供了獨立與內容的、能夠與瀏覽器窗口進行互動的對象結構，BOM由多個對象構成，其中表明瀏覽器窗口的window對象是BOM的頂層對象，其餘對象都是該對象的子對象。

 

主流瀏覽器的介紹
瀏覽器內核主要指的是瀏覽器的渲染引擎，2013 年之前，表明有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌開始研發 blink 引擎，chrome 28 之後開始使用，而 opera 則放棄了自主研發的 Presto 引擎，投入谷歌懷抱，和谷歌一塊兒研發 blink 引擎，國內各類 chrome系的瀏覽器（360、UC、QQ、2345 等等）也紛紛放棄 webkit，投入 blink 的懷抱。

移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核。

目前移動設備瀏覽器上經常使用的內核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 以前的 Android 系統瀏覽器內核是 WebKit，Android4.4 系統瀏覽器切換到了Chromium，內核是 Webkit 的分支 Blink，Windows Phone 8 系統瀏覽器內核是 Trident。

BOM對象

window 對象，是 JS 的最頂層對象，其餘的 BOM 對象都是 window 對象的屬性；
document 對象，文檔對象；
location 對象，瀏覽器當前URL信息；
navigator 對象，瀏覽器自己信息；
screen 對象，客戶端屏幕信息；
history 對象，瀏覽器訪問歷史信息；
1）、Window對象：BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是經過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。 

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
window對象經常使用方法有

彈框類的方法。前面省略window

alert('提示信息')
confirm("確認信息")
prompt("彈出輸入框")
open("url地址"，「打開的方式（能夠是-self或-black）」，「新窗口的大小」）

注：若是url爲空，則默認打開一個空白頁面，若是打開方式爲空，則默認爲新窗口方式打開頁面。

返回值爲：返回新打開窗口的window對象

close()  關閉當前的網頁。 注：存在兼容性問題：FF：禁止設置關閉瀏覽器的代碼

      Chrome：默認直接關閉

       IE：詢問用戶

window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

定時器，清除定時器。

setTimeout(函數，時間) 只執行一次
setInterval(函數，時間) 無限執行

clearTimeout/clearInterval(定時器名稱) 清除定時器

2）、location對象

window.location對象：用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。在編寫時可不使用 window 這個前綴。

location.herf = 'url地址'
hash 返回#號後面的字符串，不包含散列，則返回空字符串。
host 返回服務器名稱和端口號
pathname 返回目錄和文件名。 /project/test.html
search 返回？號後面的全部值。
port 返回URL中的指定的端口號，如URL中不包含端口號返回空字符串
portocol 返回頁面使用的協議。 http:或https:

3）、navigator對象

window.navigator 對象包含有關訪問者瀏覽器的信息。在編寫時可不使用 window 這個前綴。

navigator.platform：操做系統類型；
navigator.userAgent：瀏覽器設定的User-Agent字符串。
navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本；
navigator.language：瀏覽器設置的語言；
userAgent是最經常使用的屬性，用來完成瀏覽器判斷。

if(window.navigator.userAgent.indexOf('MSIE')!=-1){
alert('我是IE');
}else{
alert('我不是IE');
}
4）、screen對象

window.screen 對象包含有關用戶屏幕的信息。

 screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比窗口任務欄。                                   

     screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比窗口任務欄。

document.write(screen.availHeight+screen.availWidth);//獲取屏幕的寬度和高度之和
5）、history對象
window.history 對象包含瀏覽器的歷史。爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

 history.back() - 加載歷史列表中的前一個 URL。返回上一頁。

 history.forward() - 加載歷史列表中的下一個 URL。返回下一頁。                                                                                           

 go(「參數」) -1表示上一頁，1表示下一頁。

綜合以上，頁面跳轉的方法有：

一、window.location.href = '你所要跳轉到的頁面';
二、window.open('你所要跳轉到的頁面’);
三、window.history.back(-1):返回上一頁
四、window.history.go(-1/1):返回上一頁或下一頁5、
五、history.go("baidu.com")；

窗口尺寸與大小

可視區尺寸：  document.documentElement.clientWidth     

                                                                                                                   

   document.documentElement.clientHeight

滾動條滾動距離： document.documentElement.clientScrollTop                                                                                                                          document.documentElement.clientScrollLeft                                                                                                                     

  存在兼容性問題（Chrome與其它瀏覽器不一樣），解決辦法以下

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;
內容高/寬：元素.scrollHeight/scrollWidth

當一個時間發生時鼠標到頁面可視區的距離：clientX/clientY

系統對話框alert()、confirm()和prompt()