摘要

如果想在Web中使用JavaScript，那麼BOM無疑是真正的核心。BOM提供了許多物件用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。

這一篇就來說一下BOM物件的核心內容。

1.Window 物件

BOM的核心物件是window，它表示瀏覽器的一個例項。在瀏覽器中，window物件有雙重角色，它既是通過JavaScript訪問瀏覽器視窗的一個介面，又是ECMAscript規定的Global物件。

（1）全域性作用域

這意味著在網頁中定義的任何變數，方法和物件，都是在以window為Global物件的下面定義的。
我們來看一下這段程式碼：

var age = 29;
function
 
 sayAge(){
    console.log(this.age);
}

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

不管定義的變數還是方法，都是以window來定義的。
所以在sayAge方法裡面的this指向的是呼叫該方法的window物件。

（2）不同定義的區別

那這個時候我們要想一個問題了，我們直接定義變數和給window新增變數有什麼區別嗎？
讓我們看一下這段程式碼：

var name = 'lisi';
window.age = 29;

delete window.name; //返回false
 

delete window.age; // 返回true

這裡我們可以看到，通過var來定義在window下的變數，不能通過delete刪除。

這裡面的原理，其實是在定義屬性的時候，將一個叫Configurable屬性設定為了false，從而不能被delete刪除（這裡面不懂可以看一下之前的文章）

Object.defineProperty方法（詳解）

2.視窗位置

用來確定和修改window物件位置的屬性和方法有很多。
獲取視窗位置，針對於不同的瀏覽器，有兩對屬性。

1.screenLeft和screenTop

2.screenX和screenY

使用下面的方法可以解決瀏覽器的相容問題

        var
 
 leftPos = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
        var topPos = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;

而用來移動視窗的方法我們可以使用moveTo和moveBy這兩個方法。
前者是接收新位置的x和y座標的值，後者接收的是水平和豎直方向上移動的畫素數。

說白了就是moveTo可以移動到給定位置，moveBy就是以原先為基礎進行移動。

像這兩段程式碼：

        window.moveTo(0,0); // 將視窗移動到螢幕的左上角
        window.moveBy(0,100); // 將視窗向下移動100畫素

3.視窗大小

想要獲取視窗的大小並且解決瀏覽器的相容問題，可不是那麼簡單。
針對於不同的瀏覽器，確定視窗大小的屬性也有兩對。

1.innerWidth，innerHeight

2.outerWidth，outerHeight

但如果瀏覽器不允許上面的屬性使用，我們可以採用其他的方法

1.標準模式下：

document.documentElement.clientWidth
和document.documentElement.clientHeight
可以進行獲取

2.混雜模式下

document.body.clientWidth
和document.body.clientHeigh
t可以進行獲取

所以針對於瀏覽器的相容，我們可以這樣去寫：

        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;
            }
        }

另外，使用**resizeTo()和resizeBy()**這兩個方法可以調整瀏覽器視窗的大小：

        window.resizeTo(100,100); //調整到100 * 100
        window.resizeBy(100,50); // 調整到（100 + 100） * （100 + 50）

前者是調整到指定大小。
後者是根據原先的值進行調整。

4.導航和開啟視窗

使用window.open()可以導航到一個特定的URL，也可以開啟一個新的視窗。
這個方法接收4個引數：

URL,視窗目標，一個特定的字串，一個布林值。

正常來講我們一般只傳遞第一個引數。

所以後面的三個引數在這裡面不進行特殊說明，如果需要了解可以查閱資料進行學習。

5.間接呼叫和超時呼叫

OK，現在該說所有人都很熟悉的兩個方法了。

先說一下超時呼叫：

        //設定超時呼叫
        var timer = setTimeout(() => {
            console.log('超時呼叫');
        }, 3000);

        //把它取消
        clearTimeout(timer);

使用起來應該也是很熟悉了。

再說一下間接呼叫：

        //設定間接呼叫
        var interval = setInterval(() => {
            console.log('間接呼叫');
        }, 3000);

        //把它取消
        clearInterval(interval)

6.系統對話方塊

1.alert() 提示框

他的效果是這個樣子的，平時也是我們除錯用的最多的。

2.confirm() 警告框

他的效果是這樣的：

根據點選確定還是取消我們可以有不同的操作：

        var flag = confirm('Are you srue');
        if(flag){
            alert('yes')
        }else{
            alert('no')
        }

3.prompt() 輸入框

他的效果是這個樣子：

我們可以根據輸入來進行操作：

        var result = prompt('enter your name','');
        if(result != null){
            alert(result)
        }

7.location物件

location是最有用的BOM物件之一，他提供了與當前視窗中載入的文件的資訊，還提供了一些導航功能。
現在我們來看一下它的屬性：

然後還有方法：

當我們需要用到location物件的時候就可以查閱這個表格啦。

8.history物件

history物件儲存著使用者上網的歷史記錄，從視窗被開啟的那一刻算起。
使用go()方法可以在使用者的歷史記錄任意跳轉：

        history.go(-1); //後退一頁
        history.go(1); // 前進一頁
        history.go('wrox.com');// 跳轉到最近的wrox頁面

另外還有back和forward方法來代替go，顧名思義，就是前進和後退的意思。

        history.back();//後退一頁
        history.forward();// 前進一頁

除了上述幾個方法以外，history還有一個length屬性，用來表示使用者歷史記錄的數量，根據這個屬性我們可以確定使用者是否只打開了一個頁面：

        if(history.length == 0){
            console.log("使用者只打開了一個頁面");
        }

OK，關於BOM下的物件，也就說到這裡！