不僅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對象的屬性,可以確定正在運行什么瀏覽器,用戶訪問過的頁面,瀏覽器窗口的大小和用戶屏幕的大小等。還可以使用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 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對象 HTML5規范中為navigator對象新增了geolocation屬性。主要作用是讓開發人員獲得并利用設備和計算機的位置。用戶必須給予開發人員權限,才能獲取并使用這些信息。例如: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,表示描述錯誤的人類可讀的信息。
window對象的screen對象屬性包含了大量有關客戶機顯示能力的信息。其屬性包括height和width,分別表示屏幕的垂直和水平尺寸,單位為像素。screen對象還有colorDepth屬性,表示客戶機屏幕使用的色彩位數。要確定屏幕上有多少種顏色,只需要計算2的colorDepth次方。例如,colorDepth為1,表示只有兩種顏色;而colorDepth為8,表示有256中顏色。目前大部分屏幕的色彩深度都至少是8,通常是24或者32。
與window對象一樣,document對象可能是BOM中最重要和最常用的對象之一。通過這個對象,可以訪問到頁面上的HTML元素及其屬性和方法。 document對象有很多關聯的屬性,它們也是類似于數組的結構,稱為集合。主要的集合有forms,images和links。IE還支持其他很多集合屬性,如all集合屬性,它是頁面上用對象表示的所有元素的數組。
images集合 可以使用一下標記在HTML頁面中插入一幅圖像:<img alt="USA" name="myImage" src="usa.gif">瀏覽器通過創建一個img對象myImage,使這個圖像可以通過JavaScript來操作。實際上,頁面上的每幅圖像都有一個對應的img對象。頁面上的每個img對象都保存早images集合中,該集合是document對象的一個屬性。這個集合以及其他集合的用法與數組的用法相同。頁面上的第一幅圖片在document.images[0]元素中,第二幅圖像在document.images[1]中,以此類推。 img對象有許多非常有用的屬性。其中最重要的是src屬性,改變它就可以改變所加載的圖像。
links集合 對于每個有href屬性的超鏈接元素< a/>,瀏覽器都會創建一個a對象。a對象最重要的屬性是href,它對應該標記的href屬性。使用該屬性,可以確定該鏈接指向何處,在頁面加載完成后,還可以修改它。頁面上所有a對象的集合都包含在links的集合中。新聞熱點
疑難解答