js瀏覽器物件模型（BOM）

morra發表於2016-12-28
JS瀏覽器物件模型

瀏覽器物件模型(Browser Object Model,BOM)：瀏覽器為js提供的物件集合。

1 windows物件

windows物件：表示瀏覽器的框架以及與其相關的內容，比如滾動條和導航欄圖示等等。或者說windows物件就代表瀏覽器本身。windows物件是個全域性物件，他不需要使用名稱訪問自己的屬性和方法。

//下面的程式碼本質是相同的
alert("hello!");
 
window.alert("hello!");

windows物件的某些屬性也是物件。這些屬性（物件）有location、history、document、navigator、screen。其中document屬性（物件）又包含forms、images、links等屬性（物件）。

js瀏覽器物件模型（BOM）

2 history物件

history物件跟蹤使用者訪問的每個頁面，這個頁面列表也叫做 history stack。使用者單機瀏覽器的 Back 和 Forward 按鈕，其本質就是在歷史棧裡進行切換。

2.1 屬性

屬性 註釋
length 返回瀏覽器歷史棧中的 URL 數量

2.2 方法

方法 註釋
back() 載入 history 列表中的前一個 URL
forward() 載入 history 列表中的下一個 URL
go() 載入 history 列表中的某個具體頁面 
history.go(-1);     //後退1個頁面
history.back();
 
history.go(1);       //前進1個頁面
history.forward();
 
history.go(-2);     //後退2個頁面

3 location物件

3.1 屬性

location包含與當前頁面位置有關的資訊，常用屬性如下：

//設定或獲取整個 URL 為字串
console.log(location.href);
/* http://localhost:63342/frontend_projects/test/index.html?_ijt=ll3ai4h2v873l9ukcm2g8a73hr  */


//設定或獲取物件指定的檔名或路徑
console.log(location.pathname);
/* /frontend_projects/test/index.html*/


//設定或獲取與 URL 關聯的埠號碼
console.log(location.port);
/* 63342 */


//設定或獲取 URL 的協議部分
console.log(location.protocol);
/* http: */


//設定或獲取 href 屬性中在井號“#”後面的分段
console.log(location.hash);
/* */


//設定或獲取 location 或 URL 的 hostname 和 port 號碼
console.log(location.host);
/* localhost:63342 */


//設定或獲取 href 屬性中跟在問號後面的部分
console.log(location.search);
/* ?_ijt=1lrq8evbm5uovrl1ib8af65g5n */

3.2 方法

方法 註釋
reload() 重新載入當前文件
replace() 用新的文件替換當前文件

使用新頁面替換當前頁面

//方法一：
//新頁面是加在歷史棧頂的，可以使用back()來返回到原來的頁面
location.href ="newPage.html";
 
//方法二：
//使用replace()的本質是用新頁面替換掉歷史棧中的舊頁面,因此無法通過history.back()退回到原來的頁面
location.replace("newPage.html");

navigator物件包含瀏覽器和執行瀏覽器相關的資訊

4.1 屬性

屬性 註釋
appName 返回瀏覽器的模型
appVersion 返回瀏覽器的平臺和版本資訊
appCodeName 返回瀏覽器的程式碼名
platform 返回執行瀏覽器的作業系統平臺
systemLanguage 返回 OS 使用的預設語言
userLanguage 返回 OS 的自然語言設定
onLine 返回一個布林值，指示指示瀏覽器是否處於離線模式
cookieEnabled 返回一個布林值，指示指示瀏覽器是否啟用了cookie
userAgent 返回由客戶機傳送伺服器的 user-agent 頭部的值 
var tmp1 = navigator.appName;
//Netscape
 
var tmp2 = navigator.appVersion;
//5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
 
var tmp3 = navigator.appCodeName;
//Mozilla
 
var tmp4 = navigator.platform;
//Win32
 
var tmp5 = navigator.systemLanguage;
//undefined
 
var tmp6 = navigator.userLanguage
//undefined
 
var tmp7 = navigator.onLine;
//true
 
var tmp8 = navigator.cookieEnabled;
//true
 
var tmp9 = navigator.userAgent;
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

4.2 方法

方法 註釋
javaEnabled() 返回一個布林值，指示瀏覽器是否支援並啟用了 Java

4.3 新增的geolocation

H5中為navigator新增了geolocation屬性，並且geolocation也是物件。它可以獲取並利用裝置的物理位置。

geolocation中最常用的就是getCurrentPosition()方法：

//編寫回撥函式
//Geolocation.prototype.getCurrentPosition = function(successCallback,errorCallback,options) {};
function geoSucess(position) {
    var coords = position.coords;
    var latitude = coords.latitude;
    var longitude = coords.longitude;
 
    var message = "you are at "+latitude+","+longitude;
    alert(message);
}
 
function geoError(errorObj) {
    alert(errorObj.message);  //把系統返回的錯誤物件作為回撥函式的引數
 
}
 
navigator.geolocation.getCurrentPosition(geoSucess,geoError);

5 screen物件

Screen 物件包含有關客戶端顯示螢幕的資訊

詳細資訊參考：http://www.w3school.com.cn/jsref/dom_obj_screen.asp

6 document物件

有關document的高階操作就是DOM，後面我會介紹，這裡只簡單介紹document物件的基礎用法。

document 是BOM中最常用的一個物件之一。通過這個物件可以訪問到頁面上的HTML元素以及其屬性和方法。

document 有很多關聯的屬性，這些屬性是類似陣列的結構，即集合。常用的集合有forms、images、links。

js瀏覽器物件模型（BOM）

6.1 屬性

cookie：設定或返回與當前文件有關的所有 cookie。該屬性是一個可讀可寫的字串，可使用該屬性對當前文件的 cookie 進行讀取、建立、修改和刪除操作。

domain：返回當前文件的域名。該屬性是一個只讀的字串，包含了載入當前文件的 web 伺服器的主機名。

lastModified：返回文件被最後修改的日期和時間。該值來自於 Last-Modified HTTP 頭部，它是由 Web 伺服器傳送的可選項。

referrer：返回載入當前文件的文件的 URL。如果當前文件不是通過超級連結訪問的，則為 null。這個屬性允許客戶端 JavaScript 訪問 HTTP 引用頭部。

title：返回當前文件的標題

URL：返回當前文件的 URL。一般情況下，該屬性的值與包含文件的 Window 的 location.href 屬性相同。不過，在 URL 重定向發生的時候，這個 URL 屬性儲存了文件的實際 URL，而 location.href 儲存了請求的 URL。

6.2 方法

getElementById()：返回對擁有指定 id 的第一個物件的引用

getElementsByName()：返回帶有指定名稱的物件集合

getElementsByTagName()：返回帶有指定標籤名的物件集合

close()：關閉用 document.open() 方法開啟的輸出流，並顯示選定的資料

open() ：開啟一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出

write()：向文件寫 HTML 表示式 或 JavaScript 程式碼

writeln()：等同於 write() 方法，不同的是在每個表示式之後寫一個換行符

//效果相同
document.writeln("hello!")
document.write("hello!\n")

6.3 集合

6.3.1 images集合

頁面上的所有影象都儲存在images集合中,images[0]表示頁面上的第一個圖片位，依次類推。所以我們可以利用js來按需選擇要顯示的影象源。

<img name="myImage" src="bg.jpg"/>
 
<script>
    var myImage = [
        "bj1.gif",
        "bj2.gif",
        "bj3.gif",
        "bj4.gif"
    ];
 
    var imgIndex = prompt("Enter a number from 0 to 3","");
    document.images[0].src = myImage[imgIndex];
 
    document.images.length //獲取頁面的圖片位數量
 
</script>
6.3.2 links集合

對於每一個有href屬性的超連結元素<a/>，瀏覽器都會建立一個a物件。與images集合類似，頁面上的所有a物件都包含在links集合中。

document.links.length //獲取頁面連結的數量

7 瀏覽器測試

常用的程式碼測試有兩種：特性檢測和瀏覽器嗅探

7.1 特性檢測

特性檢測是指檢測瀏覽器是否支援某個特性的過程。

//檢測瀏覽器是否支援navigator.geolocation
if(navigator.geolocation){
   //blablabla
}

也可以寫成下面的格式:

if(typeof navigator.geolocation!="undefined"){
       //blablabla
}
 
//在支援geolocation的瀏覽器中，型別為"object，而在不支援geolocation的瀏覽器中，型別為"undefined"

7.2 瀏覽器嗅探

瀏覽器嗅探就是基於瀏覽器的userAgent字串的，然而這個欄位是可以被修改的，所以非常不可靠。可以通過修改user-Agent來實現瀏覽器和作業系統的偽裝。

//navigator.appName    返回瀏覽器的模型
//對IE返回"Microsoft Internet Explorer"，對Firefox、Chrome、Safari則返回"Netscape"
 
//navigator.userAgent   返回瀏覽器與作業系統相關的資訊
//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

相關文章