BOM對象即瀏覽器內置對象，現今流行的瀏覽器內核有Safri，Firefox，Chrome,Opera，IE其中IE的兼容性是最蛋疼的在10及其過后還好點，但是現在IE基本上淘汰，而國內像360這種垃圾玩意兒包了個IE殼導出吹

真是不像樣子，也不要臉。

BOM對象在不同內核的瀏覽器，有很多兼容性問題，比如一些屬性上等等，以及后面說的Dom更是很多差別。

?

1 全局作用域

window在SPA，單頁面應用程序里面處于整個BOM樹最頂端，也就是全局作用域的大哥，所有的對象都直接間接的寄宿在window對象下

var obj='dddd';與window.obj='ddd';的不同在于var申明（注意js中申明也就是定義）的變量不能被delete刪除掉，即刪除的結果返回false，因為這樣申明的變量配置為不可刪除的特性為true；而window.obj則相反

delete obj ?->false;

delete window.obj -->true;

2 window對象樹

為什么這么說，因為有了frameset的引入，一個web頁面可能有很多子頁面通過frame的方式組合成一張頁面，那么這個時候window自然已經不是最頂層的對象了，響應的這些子window對象都由一個叫top對象管理著，自然的top對象才是真正的王者，在他下面管理著一個frames數組，我們的頁面框架就放置在這個數組里面，如果想要訪問某個frame可以使用top.frames[0]或者top.frames[name]來訪問，由于window成為window樹中一名成員，window通過parent也可以訪問上級frame對象，所以訪問具有多條路徑

top.frames[0];top.frames[name],也可以不適用top前綴,frames[0],也可以使用window.parent層層查找，而每個frame對象具有name屬性

?

3 窗口位置

什么是窗口，也就是我們通常見到的一個web頁面，也就對應一個window，這個window可能是SPA，也可以是通過frames嵌入的；

窗口位置：即窗口左上角與屏幕左上角的偏移距離；通常在大多數瀏覽器里面使用window.screenLeft,window.screenTop來訪問，而在forefox里面使用window.screenX,window.screenY來訪問；

?

4 窗口大小

由于web頁面具有邊框這個玩意兒，便有了outerWidth,outerHeight和innerWidth,innerHeight兩種方式來認為就是窗口大小，outer當然代表了整個瀏覽器最外層的大小，而inner則代表了真是顯示內容的區域

即視口，就是我們看到的瀏覽器內容窗口大小，這個與document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth相對應也就是所謂的視口大小，視口大小可能隨時變化，而在移動

端document.body.clientWidth,document.body.clientHeigth才代表真正渲染后的視口大小，而document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth代表布局大小；

?

5 導航

window.open：打開新的頁面，這個頁面可能被瀏覽器阻止，導致返回值為null

6 setTimeout,setInterval

2個老朋友了就不多說了

?

7 系統對話框

aler：

confirm，prompt：基本廢物一個

8 location對象

即瀏覽器地址欄對象，這個對象具有url多個分解后的屬性，如host

9 navigator對象

用途呢：主要用來檢測瀏覽器插件和瀏覽器的屬性介紹，或者瀏覽器訂閱rss這類的，很少使用

10 history和screen對象

history:go(-1);go(1)很簡單不多說了

screen對象幾乎沒人使用咯

?

轉載于:https://www.cnblogs.com/rjjs/p/5900339.html

總結

以上是生活随笔為你收集整理的重操JS旧业第十一弹：BOM对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。