劍指前端（前端入門筆記系列）——BOM

BOM BOM ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那麼BOM（瀏覽器對象模型）則無疑才是真正的核心，BOM提供了很多對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關，那麼，什麼是BOM呢？我們可以從這幾點解析一下： 1.BOM是Bro ...

BOM 　　ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那麼BOM（瀏覽器對象模型）則無疑才是真正的核心，BOM提供了很多對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關，那麼，什麼是BOM呢？我們可以從這幾點解析一下： 1.BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型。這個對象就是window 2.BOM提供了獨立於內容而與瀏覽器視窗進行交互的對象，也就是BOM是瀏覽器廠家分別推出 3.BOM由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性 4.BOM缺乏標準，但是BOM提供了ECMAScript的運行平臺 5.BOM最初是Netscape瀏覽器標準的一部分 6.BOM主要用於管理視窗與視窗之間的通訊，因此其核心對象為window window對象 　　瀏覽器：可以運行html+css+js的一個環境，這個環境有很多種，所以會產生很多的相容問題。大部分瀏覽器把自己的大部分功能都抽象出來描述成一個對象，這個對象叫window，window對象是瀏覽器內置的一個對象，是js中全局對象的寄存地，相當於BOM的一個抽象。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪問瀏覽器視窗的一個介面，又是ECMAScript規定的一個Global對象，因此有權訪問parseInt()等方法。

window對象表示瀏覽器的一個實例，這就意味著全局作用域中聲明的變數、函數都會變成window對象的屬性和方法，例如：

var age = 29;
function sayAge(){
    return "123";
}
console.log(age === window.age);                //true
console.log(sayAge === window.sayAge);          //true

　　我們可以看到，全局變數age其實就是window.age，而全局函數sayAge就是window.sayAge，只不過window可以省略不寫，我們寫的全局變數和函數其實都會自動歸在window對象名下，那麼我們再來驗證一下：

console.log(parseInt === window.parseInt);                  //true
console.log(parseFloat === window.parseFloat);              //true
console.log(setInterval === window.setInterval);            //true
console.log(setTimeout === window.setTimeout);              //true
console.log(clearInterval === window.clearInterval);        //true
console.log(clearTimeout === window.clearTimeout);          //true
console.log(Number === window.Number);                      //true
console.log(Date === window.Date);                          //true
console.log(String === window.String);                      //true
console.log(isNaN === window.isNaN);                       //true

這些都是我們常用的內置函數，它們也都屬於window對象

【註】拋開全局變數會變成window對象的屬性不說，定義全局變數與在window對象上面直接定義屬性還是有區別的，區別就是全局變數不能通過delete操作符刪除，而直接在window對象上定義的屬性可以：

var age = 18;                           //定義全局變數
window.name = "AI-fisher";              //在window對象上定義變數（屬性）
 
//在IE<9時拋出錯誤，其他瀏覽器返回false
delete window.age;                      //刪除全局變數
//在IE<9時拋出錯誤，其他瀏覽器返回true
delete window.name;                     //刪除window對象上定義的變數
 
console.log(window.age);                //18
console.log(window.name);               //undefined

　　內部實現的規則是：var語言添加的window屬性有一個名為[[Configurable]]的特性，這個特性的值被設置為false，因此這樣定義的屬性不可以通過delete操作符刪除。IE8及更早版本在遇到使用delete刪除window屬性的語句時，不管該屬性最初是如何創建的，都會拋出錯誤，以示警告。IE9及更高版本不會拋出錯誤。

屬性（視窗位置）： 　　用來確定和修改window對象位置的屬性和方法有很多。有些瀏覽器使用screenTop和screenLeft來表示視窗相對於屏幕左邊和上邊的位置，比如：IE和Opera。有些瀏覽器則使用screenX和screenY屬性，比如Firefox。而有些瀏覽器兩種都支持，比如：Safari和Chrome。 方法：

alert(要顯示的文本);      //彈出信息框
prompt(提示對話框信息);   //彈出輸入框，點擊確定，返回字元串，點擊取消，返回null
confirm(提示文字);        //點擊確定返回true，點擊取消返回false
//關閉瀏覽器，火狐不支持，但都支持通過別的網頁打開的新的網頁關閉，不允許關閉非腳本打開的頁面
close();
open(url,name,feature,replace);
//url，可選，要在新視窗中顯示的文檔的URL
//name，可選，聲明瞭新視窗的名稱
//feature，replace自行擴展
//谷歌會預設把系統自動打開的新網頁阻止掉，但不阻止通過事件打開的網頁

子對象

history對象（包含瀏覽器訪問過的url）

history對象保存著用戶上網的歷史記錄，從視窗被打開的那一刻算起，因為history是window對象的屬性，因此每個瀏覽器視窗、每個標簽頁乃至每個框架，都有自己的history對愛那個與特定的window對象關聯。處於安全方面的考慮，開發人員無法得知用戶瀏覽過的URL。不過，藉由用戶訪問過的頁面列表，同樣可以在不知道實際URL 的情況下實現後退和前進。屬性

history.length;      //返回歷史記錄的數量

方法

history.back();      //後退，載入前一個url。
history.forward();   //前進，需要後退一下之後，才有前進的方向
history.go(num);     //參數為正，前進相應的數目，為負，後退相應的數目，為0，刷新

location對象（包含當前url的相關信息，而history對象不能具體反映url的相關信息）

　　location對象是最有用的屬性之一，它提供了與當前視窗中載入的文檔有關的信息，還提供了一些導航功能。事實上，location對象是很特別的一個對象，因為它既是window對象的屬性，也是document對象的屬性；換句話說，window.location和document.location引用的是同一個對象。location對象的用處不只是表現在他保存著當前文檔的信息，還表現在它將URL解析為獨立的片段，讓開發人員可以通過不同的屬性來訪問這些片段。屬性

方法 assign()方法可以立即打開新URL併在瀏覽器的歷史記錄中生成一條記錄。

location.assign(url);   //載入新頁面，當url為空字元時，載入當前頁面

如果將location.href或window.location設置為一個URL值，也會以該方法調用assign()方法。。例如：下列兩行代碼與顯示調用assign()方法的效果完全一樣。

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

　　跟位置有關的最後一個方法是reload()方法，作用是重新載入當前顯示的頁面，如果調用reload()時不穿敵人和參數，頁面就會以最有效的方式重新載入。也就是說，如果頁面自上次請求以來並沒有改變過，頁面就會從瀏覽器緩存中重新載入。

location.reload();

如果要強制從伺服器重新載入，則需要像下麵這樣為該方法傳遞參數true

location.reload();  //傳遞一個true，不使用緩存刷新

navigator對象（瀏覽器信息）：

屬性

navigator.appName;   //返回當前瀏覽器的名稱

navigator.appVersion;//返回當前瀏覽器的版本號

navigator.platform;  //返回當前電腦的操作系統

以上方法已經在逐漸被拋棄，出現一個新的屬性替代這些屬性：

navigator.userAgent; //返回瀏覽器信息

frames對象：包含當前頁面所有的框架信息

屬性

 frames.length;                  //返回當前頁面的框架數量
 frames[0].location;             //修改第一個框架的地址

screen對象：包含當前顯示屏信息

　　JavaScript中有幾個對象在編程中用處不大，而screen對象就是其中之一。screen對象基本上只用來表明客戶端的能力，其中包括瀏覽器視窗外部的顯示器的信息，如像素寬度和高度等。每個瀏覽器總的screen對象都包含著各不相同的屬性。下麵列出幾個屬性是相對來說比較實用而且各瀏覽器都支持的屬性。屬性

 screen.width/height             //屏幕總寬高度
 screen.availWidth/availHeight   //屏幕的寬高（不包括任務欄）