瀏覽器物件模型bom常用4個物件（bom瀏覽器物件模型）

是什麼

BOM (Browser Object Model)，瀏覽器物件模型，提供了獨立於內容與瀏覽器視窗進行互動的物件

其作用就是跟瀏覽器做一些互動效果,比如如何進行頁面的後退，前進，重新整理，瀏覽器的視窗發生變化，滾動條的滾動，以及獲取客戶的一些資訊如：瀏覽器品牌版本，螢幕解析度

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

訪問客戶端物件

使用 window 物件可以訪問客戶端其他物件，這種關係構成瀏覽器物件模型，window 物件代表根節點，瀏覽器物件關係的關係如圖所示，每個物件說明如下。

• window：客戶端 JavaScript 頂層物件。每當或標籤出現時，window 物件就會被自動建立。
• navigator：包含客戶端有關瀏覽器資訊。
• screen：包含客戶端螢幕的資訊。
• history：包含瀏覽器視窗訪問過的 URL 資訊。
• location：包含當前網頁文件的 URL 資訊。
• document：包含整個 HTML 文件，可被用來訪問文件內容及其所有頁面元素。

當然我們可以吧window下的所有子物件看成他的他的屬性，只不過屬性也是一個物件而已。其實window也有很多常用的方法：

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">

window.open() 會返回新視窗的引用，也就是新視窗的 window 物件

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

window.close() 僅用於通過 window.open() 開啟的視窗

新建立的 window 物件有一個 opener 屬性，該屬性指向開啟他的原始視窗物件

Window 子物件

Window的子物件主要有如下幾個：

1. JavaScript document 物件
2. JavaScript frames 物件
3. JavaScript history 物件
4. JavaScript location 物件
5. JavaScript navigator 物件
6. JavaScript screen 物件

開啟和關閉視窗

使用 window 物件的 open() 方法可以開啟一個新視窗。用法如下：

window.open (URL, name, features, replace)

引數列表如下：

• URL：可選字串，宣告在新視窗中顯示網頁文件的 URL。如果省略，或者為空，則新視窗就不會顯示任何文件。
• name：可選字串，宣告新視窗的名稱。這個名稱可以用作標記 和的 target 目標值。如果該引數指定了一個已經存在的視窗，那麼 open() 方法就不再建立一個新視窗，而只是返回對指定視窗的引用，在這種情況下，features 引數將被忽略。
• features：可選字串，宣告瞭新視窗要顯示的標準瀏覽器的特徵，具體說明如下表所示。如果省略該引數，新視窗將具有所有標準特徵。
• replace：可選的布林值。規定了裝載到視窗的 URL 是在視窗的瀏覽歷史中建立一個新條目，還是替換瀏覽歷史中的當前條目。

該方法返回值為新建立的 window 物件，使用它可以引用新建立的視窗。

新建立的 window 物件擁有一個 opener 屬性，引用開啟它的原始物件。opener 只在彈出視窗的最外層 window 物件（top）中定義，而且指向呼叫 window.open() 方法的視窗或框架。

示例1

下面示例演示了開啟的視窗與原視窗之間的關係。

win = window.open();  //開啟新的空白視窗win.document.write ("這是新開啟的視窗");  //在新視窗中輸出提示資訊win.focus ();  //讓原視窗獲取焦點win.opener.document.write ("這是原來視窗");  //在原視窗中輸出提示資訊console.log(win.opener == window);  //檢測window.opener屬性值

使用 window 的 close() 方法可以關閉一個視窗。例如，關閉一個新建立的 win 視窗可以使用下面的方法實現。

win.close;

如果在開啟視窗內部關閉自身視窗，則應該使用下面的方法。

純文字複製

window.close;

使用 window.closed 屬性可以檢測當前視窗是否關閉，如果關閉則返回 true，否則返回 false。

示例2

下面示例演示如何自動彈出一個視窗，然後設定半秒鐘之後自動關閉該視窗，同時允許使用者單擊頁面超連結，更換彈出視窗內顯示的網頁 URL。

var url = "c.biancheng.net";  //要開啟的網頁地址var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,    scrollbars=no,resizable=no, location=no, status=no";  //設定新視窗的特性//動態生成一個超連結document.write('切換到C語言中文網首頁');var me = window.open(url, "newW", featrues);  //開啟新視窗setTimeout (function () {  //定時器    if (me.closed) {        console.log("建立的視窗已經關閉。");    } else {        me.close();    }}, 5000);  //半秒鐘之後關閉該視窗

location

url地址如下：

http://foouser:[email protected]:80/WileyCDA/?q=javascript#contents

location屬性描述如下：

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

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

如果要強制從伺服器中重新載入，傳遞一個引數true即可

window.name屬性

window.name屬性用於設定當前瀏覽器視窗的名字。它有一個特點，就是瀏覽器重新整理後，該屬性保持不變。所以，可以把值存放在該屬性內，然後跨頁面、甚至跨域名使用。當然，這個值有可能被其他網站的頁面改寫。

window.name = "Hello World!"; console.log(window.name);

各個瀏覽器對這個值的儲存容量有所不同，但是一般來說，可以高達幾MB。

該屬性只能儲存字串，且當瀏覽器視窗關閉後，所儲存的值就會消失。因此侷限性比較大，但是與iFrame視窗通訊時，非常有用。

window.innerHeight屬性，window.innerWidth屬性

這兩個屬性返回網頁的CSS佈局佔據的瀏覽器視窗的高度和寬度，單位為畫素。很顯然，當使用者放大網頁的時候（比如將網頁從100%的大小放大為200%），這兩個屬性會變小。

注意，這兩個屬性值包括滾動條的高度和寬度。

window.pageXOffset屬性，window.pageYOffset屬性

window.pageXOffset屬性返回頁面的水平滾動距離，window.pageYOffset屬性返回頁面的垂直滾動距離。這兩個屬性的單位為畫素。

iframe元素

window.frames返回一個類似陣列的物件，成員為頁面內的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每個成員對應的是框架內的視窗（即框架的window物件），獲取每個框架的DOM樹，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0]; var iframe_title = iframe.contentWindow.title;

上面程式碼用於獲取框架頁面的標題。

iframe元素遵守同源政策，只有當父頁面與框架頁面來自同一個域名，兩者之間才可以用指令碼通訊，否則只有使用window.postMessage方法。

在iframe框架內部，使用window.parent指向父頁面。

window.self，window.window

window.self和window.window屬性都指向視窗本身。這兩個屬性只讀。

window.self === window // true window.window === window // true

window.frames，window.length

window.frames屬性返回一個類似陣列的物件，成員為頁面內所有框架視窗，包括frame元素和iframe元素。window.frames[0]表示頁面中第一個框架視窗。

如果iframe元素設定了id或name屬性，那麼就可以用屬性值，引用這個iframe視窗。比如

frames屬性實際上是window物件的別名。

frames === window // true

因此，frames[0]也可以用window[0]表示。但是，從語義上看，frames更清晰，而且考慮到window還是全域性物件，因此推薦表示多視窗時，總是使用frames[0]的寫法。

window.length屬性返回當前網頁包含的框架總數。如果當前網頁不包含frame和iframe元素，那麼window.length就返回0。

window.frames.length === window.length // true

上面程式碼表示，window.frames.length與window.length應該是相等的。

window.frameElement

window.frameElement屬性主要用於當前視窗嵌在另一個網頁的情況（嵌入

// HTML 程式碼如下 // // 下面的指令碼在 about.html 裡面 var frameEl = window.frameElement; if (frameEl) {   frameEl.src = 'other.html'; }

上面程式碼中，frameEl變數就是

window.top，window.parent

window.top屬性指向最頂層視窗，主要用於在框架視窗（frame）裡面獲取頂層視窗。

window.parent屬性指向父視窗。如果當前視窗沒有父視窗，window.parent指向自身。

if (window.parent !== window.top) {   // 表明當前視窗嵌入不止一層 }

對於不包含框架的網頁，這兩個屬性等同於window物件。

window.status

window.status屬性用於讀寫瀏覽器狀態列的文字。但是，現在很多瀏覽器都不允許改寫狀態列文字，所以使用這個方法不一定有效。

window.devicePixelRatio

window.devicePixelRatio屬性返回一個數值，表示一個 CSS 畫素的大小與一個物理畫素的大小之間的比率。也就是說，它表示一個 CSS 畫素由多少個物理畫素組成。它可以用於判斷使用者的顯示環境，如果這個比率較大，就表示使用者正在使用高清螢幕，因此可以顯示較大畫素的圖片。

navigator

navigator 物件主要用來獲取瀏覽器的屬性，區分瀏覽器型別。屬性較多，且相容性比較複雜

下表列出了navigator物件介面定義的屬性和方法：

Navigator.userAgent屬性

Navigator.userAgent屬性返回瀏覽器的User-Agent字串，用來標示瀏覽器的種類。下面是Chrome瀏覽器的User-Agent。

navigator.userAgent // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通過userAgent屬性識別瀏覽器，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且無法保證未來的適用性，更何況各種上網裝置層出不窮，難以窮盡。所以，現在一般不再識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支援要用到的JavaScript功能。

不過，通過userAgent可以大致準確地識別手機瀏覽器，方法就是測試是否包含“mobi”字串。

var ua = navigator.userAgent.toLowerCase(); if (/mobi/i.test(ua)) { // 手機瀏覽器 } else { // 非手機瀏覽器 }

如果想要識別所有移動裝置的瀏覽器，可以測試更多的特徵字串。

/mobi|android|touch|mini/i.test(ua)

navigator.plugins屬性

navigator.plugins屬性返回一個類似陣列的物件，成員是瀏覽器安裝的外掛，比如Flash、ActiveX等。

screen

儲存的純粹是客戶端能力資訊，也就是瀏覽器視窗外面的客戶端顯示器的資訊，比如畫素寬度和畫素高度

一般使用以上兩個屬性，瞭解裝置的解析度。上面程式碼顯示，某裝置的解析度是1920x1080。

除非調整顯示器的解析度，否則這兩個值可以看作常量，不會發生變化。顯示器的解析度與瀏覽器設定無關，縮放網頁並不會改變解析度。

下面是根據螢幕解析度，將使用者導向不同網頁的程式碼。

if ((screen.width<=800) && (screen.height<=600)) { window.location.replace('small.html'); } else { window.location.replace('wide.html'); }

history

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

常用的屬性如下：

• history.go()

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

history.go('maixaofei.com')

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

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

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

URL的編碼/解碼方法

JavaScript提供四個URL的編碼/解碼方法。

• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()

window.getComputedStyle方法

getComputedStyle方法接受一個HTML元素作為引數，返回一個包含該HTML元素的最終樣式資訊的物件。

window.matchMedia方法

window.matchMedia方法用來檢查CSS的mediaQuery語句。

alert()，prompt()，confirm()

alert()、prompt()、confirm()都是瀏覽器用來與使用者互動的方法。它們會彈出不同的對話方塊，要求使用者做出迴應。

需要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話方塊，都是瀏覽器統一規定的式樣，是無法定製的。

alert方法彈出的對話方塊，只有一個“確定”按鈕，往往用來通知使用者某些資訊。

// 格式 alert(message); // 例項 alert("Hello World");

使用者只有點選“確定”按鈕，對話方塊才會消失。在對話方塊彈出期間，瀏覽器視窗處於凍結狀態，如果不點“確定”按鈕，使用者什麼也幹不了。

prompt方法彈出的對話方塊，在提示文字的下方，還有一個輸入框，要求使用者輸入資訊，並有“確定”和“取消”兩個按鈕。它往往用來獲取使用者輸入的資料。

// 格式 var result = prompt(text[, default]); // 例項 var result = prompt('您的年齡？', 25)

上面程式碼會跳出一個對話方塊，文字提示為“您的年齡？”，要求使用者在對話方塊中輸入自己的年齡（預設顯示25）。

prompt方法的返回值是一個字串（有可能為空）或者null，具體分成三種情況：

使用者輸入資訊，並點選“確定”，則使用者輸入的資訊就是返回值。

使用者沒有輸入資訊，直接點選“確定”，則輸入框的預設值就是返回值。

使用者點選了“取消”（或者按了Escape按鈕），則返回值是null。

prompt方法的第二個引數是可選的，但是如果不提供的話，IE瀏覽器會在輸入框中顯示undefined，Chrome會返回空字串""。因此，最好總是提供第二個引數，作為輸入框的預設值。

confirm方法彈出的對話方塊，除了提示資訊之外，只有“確定”和“取消”兩個按鈕，往往用來徵詢使用者的意見。

// 格式 var result = confirm(message); // 例項 var result = confirm("你最近好嗎？");

上面程式碼彈出一個對話方塊，上面只有一行文字“你最近好嗎？”，使用者選擇點選“確定”或“取消”。

confirm方法返回一個布林值，如果使用者點選“確定”，則返回true；如果使用者點選“取消”，則返回false。

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎