SlhwSR

面試官：說說你對 BOM 的理解，常見的 BOM 對象你了解哪些？#

一、是什麼#

BOM (Browser Object Model)，瀏覽器對象模型，提供了獨立於內容與瀏覽器窗口進行交互的對象

其作用就是跟瀏覽器做一些交互效果，比如如何進行頁面的後退，前進，刷新，瀏覽器的窗口發生變化，滾動條的滾動，以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率

瀏覽器的全部內容可以看成 DOM，整個瀏覽器可以看成 BOM。區別如下：

二、window#

Bom 的核心對象是 window，它表示瀏覽器的一個實例

在瀏覽器中，window 對象有雙重角色，即是瀏覽器窗口的一個接口，又是全局對象

因此所有在全局作用域中聲明的變量、函數都會變成 window 對象的屬性和方法

var name = 'js每日一題';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js每日一題
lookName();                //js每日一題
window.lookName();         //js每日一題

關於窗口控制方法如下：

• moveBy(x,y)：從當前位置水平移動窗體 x 個像素，垂直移動窗體 y 個像素，x 為負數，將向左移動窗體，y 為負數，將向上移動窗體
• moveTo(x,y)：移動窗體左上角到相對於屏幕左上角的 (x,y) 點
• resizeBy(w,h)：相對窗體當前的大小，寬度調整 w 個像素，高度調整 h 個像素。如果參數為負值，將縮小窗體，反之擴大窗體
• resizeTo(w,h)：把窗體寬度調整為 w 個像素，高度調整為 h 個像素
• scrollTo(x,y)：如果有滾動條，將橫向滾動條移動到相對於窗體寬度為 x 個像素的位置，將縱向滾動條移動到相對於窗體高度為 y 個像素的位置
• scrollBy(x,y)： 如果有滾動條，將橫向滾動條向左移動 x 個像素，將縱向滾動條向下移動 y 個像素

window.open() 既可以導航到一個特定的 url，也可以打開一個新的瀏覽器窗口

如果 window.open() 傳遞了第二個參數，且該參數是已有窗口或者框架的名稱，那麼就會在目標窗口加載第一個參數指定的 URL

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>

window.open() 會返回新窗口的引用，也就是新窗口的 window 對象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 僅用於通過 window.open() 打開的窗口

新創建的 window 對象有一個 opener 屬性，該屬性指向打開他的原始窗口對象

三、location#

url地址如下：

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location屬性描述如下：

除了 hash 之外，只要修改 location 的一個屬性，就會導致頁面重新加載新 URL

location.reload()，此方法可以重新刷新當前頁面。這個方法會根據最有效的方式刷新頁面，如果頁面自上一次請求以來沒有改變過，頁面就會從瀏覽器緩存中重新加載

如果要強制從服務器中重新加載，傳遞一個參數 true 即可

四、navigator#

navigator 對象主要用來獲取瀏覽器的屬性，區分瀏覽器類型。屬性較多，且兼容性比較複雜

下表列出了 navigator 對象接口定義的屬性和方法：

五、screen#

保存的純粹是客戶端能力信息，也就是瀏覽器窗口外面的客戶端顯示器的信息，比如像素寬度和像素高度

六、history#

history 對象主要用來操作瀏覽器 URL 的歷史記錄，可以通過參數向前，向後，或者向指定 URL 跳轉

常用的屬性如下：

• history.go()

接收一個整數數字或者字符串參數：向最近的一個記錄中包含指定字符串的頁面跳轉，

history.go('maixaofei.com')

當參數為整數數字的時候，正數表示向前跳轉指定的頁面，負數為向後跳轉指定的頁面

history.go(3) //向前跳轉三個記錄
history.go(-1) //向後跳轉一個記錄

• history.forward()：向前跳轉一個頁面
• history.back()：向後跳轉一個頁面
• history.length：獲取歷史記錄數