HTML BOM Browser對象

BOM：Browser Object Model，即瀏覽器對象模型，提供了獨立於內容的、能夠與瀏覽器窗口進行互動的對象結構。

Browser對象：指BOM提供的多個對象，包括：Window、Navigator、Screen、History、Location等。

其中Window對象爲頂層對象，其餘對象都爲Window對象的子對象。

 

目錄

1. Window 對象：表示瀏覽器打開的窗口，包括獲取焦點、改變滾動條、設置定時器等等。

2. Navigator 對象：包含瀏覽器信息。如：獲取瀏覽器名稱、版本信息、操做系統平臺信息等等。

3. Screen 對象：包含屏幕信息。如：獲取屏幕高度、寬度等等。

4. History 對象：可對當前頁的瀏覽歷史進行操做，如：前進、後退等。

5. Location 對象：可對當前頁面的URL進行操做，如：導航到新的頁面、獲取URL信息等。

 

1. Window 對象

1.1 說明

Window 對象：表示瀏覽器打開的窗口、標籤或者框架(若當前頁面裏包含多個iframe，會爲每一個iframe建立Window對象)。

Window對象不會被實例化，調用屬性和方法都做爲window的靜態成員。

調用方式：調用Window對象的成員時，能夠省略前面的window。如：window.alert() 可寫成 alert() 。

 

1.2 屬性

 readonly ApplicationCache applicationCache ：返回窗口的應用緩存對象。

 readonly boolean closed ：返回窗口是否已經關閉。

 readonly Console console ：返回對Consol對象的引用，對瀏覽器控制檯進行操做。

 readonly int devicePixelRatio ：返回設備像素比，即當前顯示器的物理像素和設備獨立像素(dip)的比例。

 readonly Document document ：返回當前窗口的Document對象。

 readonly Element frameElement ：若當前window處於一個<iframe>中，此屬性返回這個IFrame。若在頂級窗口，返回null。

 readonly Window[] frames ：返回一個包含窗口內全部的框架的數組。

 readonly History history ：返回一個History對象。可對當前頁的歷史進行操做，如：前進、後退等。

 readonly long innerHeight ：返回當前窗口可顯示HTML文檔的高度，單位px(像素)。

 readonly long innerWidth ：返回當前窗口可顯示HTML文檔的寬度，單位px(像素)。

 readonly long length ：返回窗口內包含框架的數量，即frames數量。

 readonly Location location ：返回一個Location對象。可對當前頁面的URL進行操做，如：導航到新的頁面、獲取URL信息等。

 readonly LocalStorage localStorage ：返回一個鍵/值對存儲的Storage對象，持續到被用戶刪除。

 string name ：設置或獲取當前窗口的name。

 readonly Navigator navigator ：返回一個Navigator 對象。包含瀏覽器信息。如：獲取瀏覽器名稱、版本信息、操做系統平臺信息等等。

 Window openner ：返回對打開當前窗口的原窗口一個引用。若當前窗口是由另外一個窗口打開的, window.opener保留對那個窗口的引用. 若是當前窗口不是由其餘窗口打開的，則該屬性返回 null。

 readonly long outerHeight ：返回當前瀏覽器的總高度，單位px(像素)。包含工具欄、滾動條、瀏覽器邊框等範圍。

 readonly long outerWidth ：返回當前瀏覽器的總寬度，單位px(像素)。包含工具欄、滾動條、瀏覽器邊框等範圍。

 readonly long pageXOffset ：返回文檔橫向滾動的距離，單位px(像素)。

 readonly long pageYOffset ：返回文檔縱向滾動的距離，單位px(像素)。

 readonly Window parent ：返回當前窗口的父級窗口。若當前窗口是頂級窗口，返回當前窗口自己。若當前窗口爲一個框架窗口，返回它的父窗口。

 readonly Screen screen ：返回一個Screen對象。包含屏幕信息。如：獲取屏幕高度、寬度等等。

 readonly long screenX ：返回瀏覽器在屏幕的X座標。

 readonly long screenY ：返回瀏覽器在屏幕的Y座標。

 readonly long scrollX ：返回文檔橫向滾動的距離，單位px(像素)。與pageXOffset屬性同樣。

 readonly long scrollY ：返回文檔縱向滾動的距離，單位px(像素)。與pageYOffset屬性同樣。

 readonly Window self ：返回一個對當前Window對象的引用。

 readonly SessionStorage sessionStorage ：返回一個鍵/值對存儲的Storage對象，持續到當前瀏覽會話結束。

 readonly Window top ：返回當前窗口的頂級窗口。若當前窗口自己已是頂級，則返回自身。若當前窗口爲一個框架窗口，返回包含它的頂級窗口(parent只是返回父窗口)。

 readonly Window window ：返回當前窗口Window對象。

 

1.3 方法

 void addEventListener(string eventType,function eventListener) ：給窗口註冊事件。eventType事件類型，如：click。eventListener：事件觸發的函數或對象。

 void alert(string msg) ：彈出一個包含msg和一個確認按鈕的警告框。

 string atob(string base64Str) ：將一個基於Base64編碼的字符串解碼爲一個字符串。

 void blur() ：當前窗口移除焦點。

 string btoa(string str) ：將一個字符串編碼爲一個Base64編碼。

 void clearInterval(long intervalHandle) ：中止intervalHandle指定的setInterval()。

 void clearTimeout(long timeoutHandle) ：中止timeoutHandle指定的setTimeout()。

 void close() ：關閉當前窗口。只能關閉由腳本打開的窗口，如：a元素打開新頁面。

 boolean confirm(string msg) ：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。點擊確認按鈕返回true，點擊取消按鈕返回false。

 void focus() ：當前窗口得到焦點。

 void moveBy(long deltaX, long deltaY) ：使open()方法建立的窗口，在自己的位置上，水平移動deltaX個像素，垂直移動deltaY個像素。

 void moveTo(long x, long y) ：使open()方法建立的窗口，移動到x，y座標。

 Window open(string url, string target, string features, string replace) ：建立一個新的窗口。

參數：
①url {string} ：新窗口加載的url。若沒有指定，將使用"about:blank"。
②target {string}  ：新窗口的名稱。若沒有指定，將使用"_black"。注意此值並非窗口標題。
③features {string} 可選 ：表示新窗口的特性，如：窗口功能和工具欄 。 字符串中不能包含任何空白字符，特性之間用逗號分隔開。

返回值：
{Window} 返回新窗口的引用。

方法詳情

 void print() ：調用瀏覽器的打印按鈕。

 string prompt(string msg) ：彈出一個顯示msg信息幷包含一個肯定按鈕和取消按鈕的輸入框。此輸入框會阻塞頁面，點擊肯定按鈕返回輸入的內容，點擊取消按鈕返回null。

 void resizeBy(long deltaWidth, long deltaHeight) ：使open()方法建立的窗口，在自己的位置上，寬度增長deltaWidth個像素，高度增長deltaHeight個像素。

 void resizeTo(long width, long height) ：使open()方法建立的窗口，寬度變爲width，高度變爲height。

 void scrollBy(long deltaWidth, long deltaHeight) ：在當前滾動的基礎上，橫向滾動deltaWidth像素，縱向滾動deltaHeight像素。

 void scrollTo(long width, long height) ：橫向滾動到width像素距離上，縱向滾動到height像素距離上。

 long setInterval(function fn, long time) ：每隔必定的週期(毫秒)執行指定函數。

參數：
①fn {function} ：須要執行的函數。
②time {long} ：設置每隔多少毫秒執行指定的函數。單位：毫秒。

返回值：
{long} 返回一個數字。能夠經過調用window.clearInterval()來取消此函數的執行。

方法詳情

 long setTimeout(function fn, long time) ：在必定的毫秒數後執行指點函數。

參數：
①fn {function} ：須要執行的函數。
②time {long} ：設置多少毫秒後執行指定的函數。單位：毫秒。

返回值：
{long} 返回一個數字。能夠經過調用window.clearTimeout()來取消此函數的執行。

方法詳情

 

2.Navigator 對象

2.1 說明

Navigator 對象：包含瀏覽器信息。如：獲取瀏覽器名稱、版本信息、操做系統平臺信息等等。

調用方式：window.navigator 或者 navigator。

 

2.2 屬性

 readonly string appName ：返回瀏覽器的名稱。基於 Netscape 的瀏覽器中，返回的是 "Netscape"。在 IE 中，返回值爲 "Microsoft Internet Explorer"。

 readonly string appVersion ：返回瀏覽器版本和平臺信息。如：某個Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

 readonly Geolocation geolocation ：返回一個Geolocation對象，可獲取當前的地理信息。

 readonly string language ：返回瀏覽器界面語言。簡體中文返回："zh-CN"。

 readonly boolean onLine ：返回瀏覽器是否可鏈接網絡。

 readonly string platform ：返回瀏覽器所在的系統平臺。如：Win32。

 readonly string userAgent ：返回由客戶機發送服務器的 user-agent 頭部的值。如："Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

 readonly ServiceWorker serviceWorker ：返回ServiceWorker對象。serviceWorker運行於瀏覽器後臺的一種腳本，它能夠無需Web頁面或者用戶交互就能提供額外的功能。

 

2.2 方法 

 boolean javaEnabled() ：返回瀏覽器是否啓用Java。

 

3. Screen 對象

3.1 介紹

Screen 對象：包含屏幕信息。如：獲取屏幕高度、寬度等等。

調用方式：window.screen 或者 screen。

 

3.2 屬性

 readonly long availHeight ：返回瀏覽器在屏幕的可用高度，單位px(像素)。可理解爲瀏覽器最大化的高度，通常爲屏幕高度減去上下系統任務欄或停靠欄。

 readonly long availWidth ：返回瀏覽器在屏幕的可用寬度，單位px(像素)。可理解爲瀏覽器最大化的寬度，通常爲屏幕寬度減去左右系統任務欄或停靠欄。

 readonly long colorDepth ：返回屏幕的顏色深度。顏色深度簡單說就是最多支持多少種顏色,。通常是用「位」來描述的。好比BMP格式，則最多能夠支持紅、綠、藍各256種，總共24位。因此顏色深度是24。

 readonly long height ：返回屏幕的高度，單位px(像素)。

 readonly long pixelDepth ：返回屏幕的色彩深度。

色彩深度計算機圖形學領域表示在位圖或者視頻幀緩衝區中儲存1像素的顏色所用的位數，它也稱爲位/像素（bpp）。
色彩深度越高，可用的顏色就越多。
色彩深度是用「n位顏色」（n-bit colour）來講明的。
若色彩深度是n位，即有2^n種顏色選擇，而儲存每像素所用的位數就是n。
好比：24位：16,777,216種顏色，真彩色，能提供比肉眼能識別更多的顏色，用於拍攝照片。

屬性詳解

 readonly long width ：返回屏幕的寬度，單位px(像素)。

 

4. History 對象

4.1 說明

History 對象：可對當前頁的瀏覽歷史進行操做，如：前進、後退等。但不能知道瀏覽了哪些URL。

調用方式：window.history 或者 history。

 

4.2 屬性

 readonly long length ：返回瀏覽器歷史列表中的 URL 數量。

 

4.3 方法

 void back() ：當前所屬窗口訪問上一個訪問過的URL。等同於瀏覽器的"後退"按鈕，也等同於history.go(-1)。

 void forward() ：當前所屬窗口訪問下一個訪問過的URL。等同於瀏覽器的"前進"按鈕，也等同於history.go(1)。

 void go(int index) ：使當前窗口訪問指定的訪問過的URL。當前窗口訪問過的URL，是存入一個數組。正數表示前進index個(點擊"前進"按鈕index次)，負數表示後退index個(點擊"後退"按鈕index次)。

 

5. Location 對象

5.1 說明

Location 對象：可對當前頁面的URL進行操做，如：導航到新的頁面、獲取URL信息等。

調用方式：window.location 或者 location。

 

5.2 屬性

 string hash ：設置或返回當前頁面URL中的的錨部分，包含開頭的#符號。

如：www.baidu.com#top
loction.hase; // => 返回#top 

屬性詳解

 string host ：設置或返回當前頁面URL的主機名稱和端口。

// 頁面地址：http://wenku.baidu.com:80/view/abc
location.host; // => 返回 'wenku.baidu.com:80'
location.host = 'www.baidu.com'; // 會讓當前窗口訪問 http://www.baidu.com/view/abc

屬性詳解

 string hostname ：設置或返回當前頁面URL的主機名稱。

// 頁面地址：http://wenku.baidu.com:80/view/abc
location.hostname; // => 返回 'wenku.baidu.com'
location.hostname = 'www.baidu.com'; // 會讓當前窗口訪問 http://www.baidu.com:80/view/abc

屬性詳解

 string href ：設置或返回當前頁面完整的URL。若設置時不加協議，設置的字符串只是改變URL最後一個'/'以後的字符串。

// 頁面地址：http://wenku.baidu.com:80/view/abc
location.href; // => 返回 'http://wenku.baidu.com:80/view/abc'
location.href = 'www.baidu.com'; // 不加協議，會讓當前窗口訪問 http://wenku.baidu.com:80/view/www.baidu.com
location.href = 'http://www.baidu.com'; // 會讓當前窗口訪問 http://www.baidu.com

屬性詳解

 string pathname ：設置或返回當前頁面URL的路徑部分。

// 頁面地址：http://wenku.baidu.com:80/view/abc
location.pathname; // => 返回 '/view/abc'
location.pathname = 'a.html'; // 修改路徑的值，會讓當前窗口訪問 http://wenku.baidu.com:80/a.html

屬性詳解

 string port ：設置或返回當前頁面URL的端口。若當前URL沒有端口，返回一個''(空字符串)。

 string protocol ：設置或返回當前頁面URL的協議，最後面會有個':'冒號。

// 頁面地址：http://www.baidu.com
location.protocol; // => 返回 'http:'
location.protocol = 'https:'; // 會讓當前窗口訪問 https://www.baidu.com

屬性詳解

 string search ：設置或返回當前頁面URL的查詢部分(從問號 (?) 開始的 URL)。

// 頁面地址：http://www.baidu.com?id=1&page=1
location.search; // => 返回 '?id=1&page=1'
location.protocol = '?id=1&page=1'; // 會讓當前窗口訪問 http://www.baidu.com?id=1&page=1
location.protocol = 'id=1'; // 省略'?'問好，會讓當前窗口訪問 http://www.baidu.com?id=1

屬性詳解

 readonly string origin ：返回當前頁面URL的源。返回格式：協議+主機名+端口；如：https://www.baidu.com

 

5.3 方法

 void assign(string url) ：設置當前頁面加載指定的url，等同於設置href屬性的值爲url。

 void reload() ：從新加載當前頁面的URL。可當作爲刷新操做。

 void replace(string url) ：設置當前頁面加載指定的url，並在瀏覽器歷史記錄中替換掉當前地址，進行"後退"操做不會顯示當前訪問過的記錄。

若已順序訪問過A和B頁面。
在B頁面，輸入：location.replace('http://c.html'); // 訪問C頁面。
此時頁面加載C頁面。點擊瀏覽器的"退回"按鈕，會退回到A頁面。

方法詳解

 

End

Web開發之路系列文章

菜單加載中...