BOM總結

1、BOM概念

　　BOM：Browser Object Model  瀏覽器對象模型，定義了JS操做瀏覽器的一些方法和屬性

 

2、BOM方法 （在BOM裏面大部分的方法都是調用window對象下的方法獲得的）

　　一、open(頁面的地址url,打開的方式)  方法  打開一個新的窗口（頁面）

　　　　(1) 若是url爲空，則默認打開一個空白頁面；

　　　　(2) 若是打開方式爲空，默認爲新窗口方式打開；

　　　　(3) 若是不寫參數，則以新窗口的方法打開一個空白頁面；

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

　　二、close()  方法  關閉窗口

　　　　(1) ff: 默認沒法關閉

　　　　(2) chrome: 默認直接關閉

　　　　(3) ie: 詢問用戶

 

3、BOM屬性

　　一、window.navigator.userAgent :  能夠獲得當前瀏覽器的信息

　　二、window.location : 瀏覽器地址信息

　　　　(1) window.location.href : url   也是瀏覽器的地址信息

　　　　(2) window.location.search : url?後面的內容

　　　　(3) window.location.hash : url#後面的內容

 

4、BOM 窗口尺寸大小

　　一、可視區的尺寸

　　　　document.documentElement.clientWidth

　　　　document.documentElement.clientHeight

 

　　二、 滾動條滾動距離（存在兼容）

　　　　(1) 其餘瀏覽器均認爲是文檔的滾動條，所以是文檔下的：

　　　　　　document.documentElement.scrollTop[scrollLeft] 

　　　　(2) 谷歌瀏覽器認爲滾動條是body的滾動條，所以是body下的：

　　　　　　document.body.scrollTop[scrollLeft]          

　　　　解決方案：

　　　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

　　

　　三、 內容高 ( 不算邊框外裏面的內容 )

　　　　oDiv.scrollHeight(Width);

 

　　四、文檔高

　　　　document.documentElement.offsetHeight

　　　　若是說獲取documentElement的高度，會存在兼容問題，通常咱們都是獲取body的高度

　　　　document.body.offsetHeight

 

5、BOM 事件

　　一、onscroll : 當滾動條滾動的時候觸發

　　　　window.onscroll = function (){  };

 

　　二、onresize : 當窗口大小發生改變的時候觸發

　　　　window.onresize = function (){  };