【JavaScript】BOM

BOM(瀏覽器對象模型)

1、window對象

BOM對象的核心是window，他表示瀏覽器的一個實例。window對象既是通過JavaScript訪問瀏覽器窗口的一個接口，有事ECMAScript規定的Global對象。

（1）全局作用域

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

（2）窗口關係及框架

如果頁面中包含框架，則每個框架都有自己的window對象，並且保存在frames集合中。
top對象：始終指向最高（外）層的框架，也就是瀏覽器窗口，使用它可以確保在一個框架中正確的訪問另一個框架
parent對象：始終指向當前框架的直接上層框架；
self對象：它始終指向window

（3）窗口位置

IE\Safari\Opera\Chrome:
screenLeft：用於表示窗口相對於屏幕左邊的位置；
screenTop：用於表示窗口相對於屏幕上邊的位置；
Firefox/Safari/Chrome：
screenX：用於表示窗口相對於屏幕左邊的位置；
screenY：用於表示窗口相對於屏幕上邊的位置；

---

moveTo():接收的是新位置的x和y座標值
moveBy():接收的是在水平和垂直方向上移動的像素數；

（4） 窗口大小

innerWidth，innerHeight：視口區域大小；
outerWidth，outerHeight：瀏覽器窗口本身的大小；
resizeTo():接收瀏覽器窗口的新寬度和新高度；
resizeBy():接收新窗口與原窗口的寬度和高度之差。

取得頁面視口大小的函數：

//取得頁面視口大小
function getViewSize () {
    var pageSize = {
        pageWidth: window.innerWidth,
        pageHeight: window.innerHeight
    };

    if (typeof pageSize.pageWidth != "number") {
        if (document.compatMode == "CSS1Compat") {//確定頁面是否處於標準模式
            pageSize.pageWidth = document.documentElement.clientWidth;
            pageSize.pageHeight = document.documentElement.clientHeight;
        } else {
            pageSize.pageWidth = document.body.clientWidth;
            pageSize.pageHeight = document.body.clientHeight;
        }
    }
    return pageSize;
}

（5）打開窗口

window.open( ):該方法既可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口。可以接受4個參數，要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。該方法會返回一個指向新窗口的引用。

新創建的window對象有一個opener屬性，其中保存着打開它的原始窗口對象，但原始窗口中沒有指向彈出框口的對象。將新創建的標籤頁的opener屬性設置爲null，即表示在單獨的進程中運行新標籤頁，瀏覽器的新創建的標籤頁不需要與原窗口進行通信。

系統對話框：

alert/confirm/prompt

2、location對象

location對象是最有用的BOM對象之一。
location對象既是window對象的屬性也是document對象的屬性。

（1）解析查詢字符串函數：

//解析查詢字符串
function getQueryStringAgs() {
    //取得查詢字符串並去掉開頭的問號
    var qs = (location.search.length > 0 ? location.search.substring(1) : "");
    //保存數據的對象
    var args = {};
    //取得每一項
    var items = qs.length ? qs.split("&") : [];
    var item = null;
    var name = null;
    var value = null;
    var i = 0;
    var len = items.length;
    //逐個將每一項添加到args對象中
    for (i = 0;i < len;i++) {
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length) {
            args[name] = value;
        }
    }
    return args;//args是一個對象，args[name] = value
}

（2）位置操作

location.assign("http://baidu.com");//立即打開新URL並在瀏覽器的歷史紀錄中生成一條記錄。
location.href="http://baidu.com";//打開新URL
location.raplace("http://baidu.com");//打開新URL，但是後退功能不能使用
location.reload();//重新加載頁面

每次修改location的屬性，頁面都會重新加載。

3、history對象

history對象保存着用戶上網的歷史紀錄，從窗口被打開的那一刻算起。
使用go（）方法可以在用戶的歷史紀錄中任意跳轉，可向前也可向後。