首頁 > 開發者 > JavaScript
標籤：var 尺寸 tab 檢測 art 之間 ros internet uil
不僅JavaScript是基於對象的，而且瀏覽器也是由對象組成的。JavaScript在瀏覽器中運行時，可以訪問瀏覽器的對象，其方式與使用JavaScript的內建對象一樣。瀏覽器提供了許多個物件，例如window對象對應瀏覽器的視窗，document對象對應瀏覽器的頁面等。還有許多其他對象可表示頁面上寫入的HTML，例如每個元素都對應一個img對象，用於在文檔中插入一幅映像。
瀏覽器為JavaScript提供的對象集合通常稱為瀏覽器物件模型（Browser Object Model,BOM）。JavaScript的這些附加功能都存在一個潛在的弊端：BOM沒有標準的實現方式。可以使用哪個對象集合高度依賴於當前使用的瀏覽器的類型和版本。如果僅使用BOM的核心功能（所有瀏覽器都有的對象），那麼代碼能更好地在不同的瀏覽器和版本中正常運行。
瀏覽器對象簡介JavaScript在頁面中運行時，可以訪問大量由Web瀏覽器提供的其他對象。與Math對象類似，會自動建立這些對象，不需要顯示地建立它們。對象及其方法，屬性和事件都已在BOM中映射好。
BOM中常用的對象。在某種程度上來說，BOM的這些部分是所有瀏覽器通用的。
BOM有一個階層。在層級的頂端是window對象，它表示瀏覽器的架構以及與其相關的所有內容，如捲軸和導覽列表徵圖等。頁麵包含在視窗架構中。在BOM中，頁面用document對象表示。
windos對象windos對象代表瀏覽器的架構或視窗，其中包含了頁面。在某種程度上，該對象也表示瀏覽器本身，它包含大量屬性。例如，通過windos對象的屬性，可以確定正在運行什麼瀏覽器，使用者訪問過的頁面，瀏覽器視窗的大小和使用者螢幕的大小等。還可以使用window對象來訪問或修改瀏覽器狀態列中的文本，修改載入的頁面甚至開啟新視窗。
window對象是一個全域對象，因此不需要使用其名稱來訪問屬性和方法。實際上，全域函數和全域變數（可以在頁面的任何位置訪問）都建立為該全域對象的屬性。
window對象的某些屬性也是對象。所有瀏覽器通用的對象包括document,navigator,history,screen和location。document對象表示頁面；history對象包含使用者訪問頁面的曆史資訊；navigator對象包含瀏覽器的資訊；screen對象漢堡用戶端顯示能力的資訊；location對象包含當前頁面的位置資訊。
注意：在Web頁面中所使用的函數名或變數名不能與BOM對象及其屬性和方法的名稱相衝突。因為在全域範圍中定義的任何函數或變數實際都會添加到window對象中。
例如
var myVariable="hello world!";alert(window.myVariable);警告框中將會顯示訊息”hello world”。
history對象history對象跟蹤使用者訪問的每個頁面。這個頁面列表常稱為瀏覽器的曆史棧（history stack）。它允許使用者單擊瀏覽器的Back或Forward按鈕，來重新訪問頁面。通過window對象的history屬性可以訪問history對象。
history對象有length屬性。使用它可以獲得曆史棧中的頁面數量。history對象有back()和forward()方法。調用它們時，瀏覽器當前載入的頁面位置就變成使用者訪問過的前一個頁面或後一個頁面。history對象的go()方法，帶一個參數，該參數指定在曆史棧中前進或後退幾個頁面。
注意:go(-1)等價於back(),go(1)等價於forward()。
location對象包含大量有關當前頁面位置的有用資訊。它不僅包含了頁面的統一資源定位器（Uniform Resource Locator,URL），還包含儲存該頁面的伺服器，串連伺服器的連接埠號碼以及所使用的協議。通過location對象的href,hostname,port和protocol屬性，就可以獲得這些資訊。但這些資訊與頁面的訪問位置相關：是從伺服器上載入頁面，還是直接從本地硬碟上載入頁面。
除了獲得當前頁面的位置之外，還可以使用location對象的方法來改變當前頁面的位置，或重新整理當前頁面。可以採用兩種方式導航到另一個頁面。一是將location對象的href屬性設定為指向另一個頁面，二是使用location對象的replace()方法。這兩種方式的效果相同，頁面都改變了位置。但是它們的區別在於：replace()方法將從曆史棧中移除當前頁面，代之以新頁面；而使用href屬性僅把新頁面加在曆史棧的頂部。
例如，要用新頁面myPage.html替換當前頁面，使用replace()方法的代碼如下:
location.replace("myPage.html");如果要載入新頁面，並把它添加到曆史棧的頂部，則可以使用href屬性：
location.href="myPage.html";navigator對象是window對象的一個屬性，可用於所有瀏覽器。這個對象更恰當的名稱是”瀏覽器對象”，因為navigator對象包含瀏覽器和運行瀏覽器的作業系統的大量資訊。
navigator對象最常見的用途是處理瀏覽器之間的差異。使用其屬性，可以確定使用者的瀏覽器，瀏覽器的版本和作業系統。接著可以操作這些資訊，確保代碼僅在支援它的瀏覽器中運行。這種技術成為“瀏覽器嗅探“，該技術存在一些限制。一種替代瀏覽器嗅探的技術是”特性檢測”，這種技術可以檢測瀏覽器是否支援某個特定的特性。
navigator對象的appName屬性和userAgent屬性在標識瀏覽器方面很有用。appName屬性將返回瀏覽器的模型，如對IE返回Microsoft Internet Explorer,對Firefox,Chrome和Safari返回Netscape。userAgent屬性返回一個包含多段資訊的字串，如瀏覽器的版本，作業系統和瀏覽器模型。這個屬性的返回因瀏覽器而異，例如在chrome擷取userAgent字串：
<body> <script> function getBrowserMsg() { var ua=navigator.userAgent; document.writeln(ua); } getBrowserMsg(); </script>頁面輸出為：
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36
geolocation對象的核心部分就是它的getCurrentPosition方法。調用該方法時，必須向它傳遞一個回呼函數，在getCurrentPosition方法的工作成功完成後就會執行這個回呼函數。
function getSuccess(position) { var coords=position.coords; var latitude=coords.latitude; var longitude=coords.longitude; var message="You‘re at "+latitude+" , "+longitude; document.write(message+"<br>"); }例如getSuccess函數就是回呼函數，當navigator.geolocation.getCurrentPosition確定電腦或裝置的位置時，就會執行這個回呼函數。getSuccess函數的參數position是一個對象，其中包含Earthly位置和電腦或裝置的海拔高度，可以通過position對象的coords屬性獲得這些資訊。latitude表示電腦的維度,longitude表示電腦的經度，altitude代表海拔高度，speed屬性用於擷取裝置/電腦的速度。
function getError(errorObj) { document.write(errorObj.message+"<br>"); } navigator.geolocation.getCurrentPosition(getSuccess,getError);getCurrentPosition()方法的第二個參數是另外一個回呼函數，當發生錯誤時就會執行這個回呼函數。錯誤回呼函數僅帶有一個參數，表示getCurrentPosition方法運行失敗的原因。它是一個包含兩個屬性的對象。第一個屬性code是一個表示失敗原因的數值。
| 值 | 說明 |
|---|---|
| 1 | 頁面無許可權擷取裝置/電腦的位置 |
| 2 | 發生了內部錯誤 |
| 3 | 在擷取裝置/電腦的位置前，所允許的時間已到 |
第二個屬性為message,表示描述錯誤的人類可讀的資訊。
screen對象window對象的screen對象屬性包含了大量有關客戶機顯示能力的資訊。其屬性包括height和width，分別表示螢幕的垂直和水平尺寸，單位為像素。screen對象還有colorDepth屬性，表示客戶機螢幕使用的色彩位元。要確定螢幕上有多少種顏色，只需要計算2的colorDepth次方。例如，colorDepth為1，表示只有兩種顏色；而colorDepth為8，表示有256中顏色。目前大部分螢幕的色彩深度都至少是8，通常是24或者32。
document對象與window對象一樣，document對象可能是BOM中最重要和最常用的對象之一。通過這個對象，可以訪問到頁面上的HTML元素及其屬性和方法。
document對象有很多關聯的屬性，它們也是類似於數組的結構，稱為集合。主要的集合有forms,images和links。IE還支援其他很多集合屬性，如all集合屬性，它是頁面上用對象表示的所有元素的數組。
<img alt="USA" name="myImage" src="usa.gif">瀏覽器通過建立一個img對象myImage，使這個映像可以通過JavaScript來操作。實際上，頁面上的每幅映像都有一個對應的img對象。頁面上的每個img對象都儲存早images集合中，該集合是document對象的一個屬性。這個集合以及其他集合的用法與數組的用法相同。頁面上的第一幅圖片在document.images[0]元素中，第二幅映像在document.images[1]中，以此類推。
img對象有許多非常有用的屬性。其中最重要的是src屬性，改變它就可以改變所載入的映像。
JavaScript 瀏覽器程式設計
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
