1. 簡介

ECMAScript是JavaScript的核心，但是如果要在WEB中使用JavaScript，那麽BOM則無疑才是真的的核心。BOM提供了很多對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。BOM沒有標準，各瀏覽器廠商間定義的公共對象，可以作為事實上的標準存在。W3C在HTML5中把BOM納入了規範中。

2. window對象

window對象：表示瀏覽器的一個實例。window的雙重角色：通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。

2.1. 全局作用域

所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。與直接在window對象上定義屬性和方法的區別在於刪除操作：window對象上定義的可以delete，全局變量不可以被刪除。

// 1. 全局變量為window對象的屬性和方法
var age = 29;
function sayAge() { console.log(this.age); }

window.age; // 29
window.sayAge(); // 29

// 2. 全局變量不可刪除, window對象的屬性和方法可以被刪除
window.color = ‘red‘;

delete window.age;
delete window.color;

window.age; // 29， 不可刪除
window.color; // undefined，可被刪除

// 3. 訪問全局對象未定義值會拋出異常，訪問window屬性不會
 

var newValue = oldValue; // 拋出異常
var newValue = window.oldValue; // undefined

很多全局JavaScript對象（如：location, navigator等）都是window對象的屬性。

2.2. 窗口關系與框架

如果頁面包含框架，每個框架有自己的window對象，並且保存在 frames 集合中（可以通過數值索引：0開始，從左到右，從上到下，或者框架名來訪問window對象）。每個window對象都有一個name屬性，用來包含框架名。使用框架的頁面中，瀏覽器中會存在多個Global對象，每個框架內的變量是獨立的，不同框架間的變量進行邏輯運算是沒有意義的。框架相關對象：

• top對象: 始終執行最高、最外層的框架，也就是瀏覽器窗口。通過它可以訪問另外一個框架對象，window對象指向的是當前框架自身。
• parent對象:始終指向當前框架的直接上層框架，某些情況下，parent === top。在沒有框架時，parent 一定等於 top.
• self對象:始終指向window，self與window對象可以互換使用，引入的目的是與top、parent對象對應起來。

<frameset rows="160,*">
    <frame src=‘frame.html‘ name=‘topFrame‘>
    <frameset cols="50%,50%">
        <frame src=‘anotherframe.htm‘ name=‘leftFrame‘>
        <frame src=‘yetanotherframe.htm‘ name=‘rightFrame‘>
    </frameset>
</frameset>

+--------------------------------------------------------------+
|    window.frames[0]                                          |
|    window.frames[‘topFrame‘]                                 |
|    top.Frames[0]                                             |
|    frames[0]                                                 |
|    frames[‘topFrame‘]                                        |
+--------------------------------------------------------------+
| window.frames[1]               | window.frames[2]            |
| window.frames[‘leftFrame‘]     | window.frames[‘rightFrame‘] |
| top.frames[1]                  | top.frames[2]               |
| top.frames[‘leftFrame‘]        | top.frmaes[‘rightFrame‘]    |
| frames[1]                      | frames[2]                   |
| frames[‘leftFrame‘]            | frames[‘rightFrame‘]        |
+--------------------------------------------------------------+

2.3. 窗口位置

確定瀏覽器窗口左邊、上邊的位置：

var leftPos = (typeof window.screenLeft === ‘number‘)? window.screenLeft : window.screenX;
var rightPos = (typeof window.screenTop === ‘number)? window.screenTop : window.screenY;

// IE, Opera: screenLeft、screenTop保存的是從屏幕左邊、上邊到由window對象表示的頁面可見區域的距離。

moveTo、moveBy方法可以移動瀏覽器，但是多數瀏覽器禁用了該功能。

2.4. 窗口大小

IE9+、Firefox、Safari、Opera和Chrome提供4個屬性來確定瀏覽器窗口大小：innerWidth、innerHeight、outerWidth、outerHeight。document.documentElement.clientWidth、document.documentElement.clientHeight保存了頁面viewport口的信息。

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if (typeof pageWidth !== ‘number‘) {
    if (document.compatMode === ‘CSS1Compat‘) {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

window.resizeTo(100, 100); // 調整到 100 x 100
window.resizeBy(100, 50); // 參數為新窗口與原窗口寬度、高度之差。調整到：100 x 50
window.resizeTo(300, 300); // 調整到 300 x 300

resizeTo、resizeBy方法可以調整瀏覽器窗口的大小，可能被瀏覽器禁用。

2.5. 導航與打開窗口

window.open(參數1, 參數2, 參數3, 參數4)
參數1：要加載的URL 
參數2：窗口目標，在哪裏打開窗口，窗口名：‘topFrame‘， 或特殊字符名： _self, _parent, _top 或 _blank. （都需要用引號引上！）
參數3：一個特性字符串，一個逗號分隔的設置字符串，表示新窗口中使用哪些屬性，屬性表如下表所示。
參數4：一個表示新頁面是否取代瀏覽器歷史中當前加載頁面的布爾值

var bingWindow = window.open(‘http://cn.bing.com‘, ‘newBingWindow‘, ‘height=400,width=400,top=10,left=10,resizable=yes‘);
bingWindow.resizeTo(500, 500);
bingWindow.moveTo(100, 100);
bingWindow.close();
console.log(bingWindow.closed); // true
bingWindow.openar === window; // true
bingWindow.openar === null; // 表示：使用單獨的進程運行新標簽頁（_blank）

參數3屬性表：

2.6. 間接調用與超時調用

var timeoutId = setTimeout(function() {}, 1000); // 1000毫秒後執行函數
clearTimeout(timeoutId);

var intervalId = setInterval(function () {}, 1000); // 每1000毫秒執行函數一次
clearInterval(intervalId);

3. location對象

tbd

4. navigator對象

tbd

5. screen對象

tbd

6. history對象

tbd

7. 總結

tbd

[TimLinux] JavaScript BOM瀏覽器對象模型