1. 程式人生 > >BOM——window 物件

BOM——window 物件

BOM 的核心物件是window,它表示瀏覽器的一個例項。在瀏覽器中,window 物件既是通過JavaScript 訪問瀏覽器視窗的一個介面,又是ECMAScript 規定的全域性物件。因此所有在全域性作用域中宣告的變數、函式都會變成window物件的屬性和方法。
全域性變數不能通過delete 操作符刪除,而直接在window 物件上的定義的屬性可以。

var age = 29;
window.color = "red";
//在IE < 9 時丟擲錯誤,在其他所有瀏覽器中都返回false
delete window.age;
//在IE < 9 時丟擲錯誤,在其他所有瀏覽器中都返回true
delete window.color; //returns true console.log(window.age); //29 console.log(window.color); //undefined
視窗大小

window物件有innerWidthinnerHeight屬性,可以獲取瀏覽器視窗的內部寬度和高度。內部寬高是指除去選單欄、工具欄、邊框等佔位元素後,用於顯示網頁的淨寬高。outerWidthouterHeight 返回瀏覽器視窗本身的尺寸。
相容性:IE<=8不支援。

window.innerWidth = width + padding + border + 縱向滾動條寬度
window.innerHeight
= height + padding + border + 橫向滾動條高度 window.outerWidth = width + padding + border + 縱向滾動條寬度 window.outerHeight = height + padding + border + 橫向滾動條高度 + 工具條高度

document.documentElement.clientWidthdocument.documentElement.clientHeight獲得的是螢幕可視區域的寬高,不包括滾動條與工具條,跟jquery的(window).width()(window).height()

獲得的結果是一樣的。
document.body.clientWidth獲得的也是可視區域的寬度,但是document.body.clientHeight獲得的是body內容的高度,如果內容只有200px,那麼這個高度也是200px,如果想通過它得到螢幕可視區域的寬高,需要樣式設定,如下:

body {
    height: 100%;
    overflow: hidden;
}
body, div, p, ul {
    margin: 0;
    padding: 0;
}

注意: body的height:100%影響document.body.clientHeight的值。
body的margin:0,padding:0影響document.body.clientWidth的值。

導航和開啟視窗

使用window.open()方法既可以導航到一個特定的URL,也可以開啟一個新的瀏覽器視窗。這個方法可以接收4 個引數:要載入的URL、視窗目標、一個特性字串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值。通常只須傳遞第一個引數,最後一個引數只在不開啟新視窗的情況下使用。
例:window.open(“http://www.baidu.com“);

間歇呼叫和超時呼叫

JavaScript 是單執行緒語言,但它允許通過設定超時值和間歇時間值來排程程式碼在特定的時刻執行。前者是在指定的時間過後執行程式碼,而後者則是每隔指定的時間就執行一次程式碼。
超時呼叫需要使用window物件的setTimeout()方法,它接受兩個引數:要執行的程式碼和以毫秒錶示的時間(即在執行程式碼前需要等待多少毫秒)。

setTimeout(function() { //在一秒鐘後打印出 Hello world!
    console.log("Hello world!");
}, 1000);

注意:第二個引數是一個表示等待多長時間的毫秒數,但經過該時間後指定的程式碼不一定會執行。JavaScript 是一個單執行緒序的直譯器,因此一定時間內只能執行一段程式碼。為了控制要執行的程式碼,就有一個JavaScript 任務佇列。這些任務會按照將它們新增到佇列的順序執行。setTimeout()的第二個引數告訴JavaScript 再過多長時間把當前任務新增到佇列中。如果佇列是空的,那麼新增的程式碼會立即執行;如果佇列不是空的,那麼它就要等前面的程式碼執行完了以後再執行。
呼叫setTimeout()之後,該方法會返回一個數值ID,表示超時呼叫。這個超時呼叫ID 是計劃執行程式碼的唯一識別符號,可以通過它來取消超時呼叫。要取消尚未執行的超時呼叫計劃,可以呼叫clearTimeout()方法並將相應的超時呼叫ID 作為引數傳遞給它,如下所示。

//設定超時呼叫
var timeoutId = setTimeout(function() {
    console.log("Hello world!");
}, 1000);
//注意:把它取消
clearTimeout(timeoutId);

只要是在指定的時間尚未過去之前呼叫clearTimeout(),就可以完全取消超時呼叫。前面的程式碼在設定超時呼叫之後馬上又呼叫了clearTimeout(),結果就跟什麼也沒有發生一樣。
超時呼叫的程式碼都是在全域性作用域中執行的,因此函式中this 的值在非嚴格模式下指向window 物件,在嚴格模式下是undefined。

間歇呼叫會按照指定的時間間隔重複執行程式碼,直至間歇呼叫被取消或者頁面被解除安裝。設定間歇呼叫的方法是setInterval(),它接受的引數與setTimeout()相同。

setInterval (function() {
    console.log("Hello world!");
}, 10000);

呼叫setInterval()方法同樣也會返回一個間歇呼叫ID,該ID 可用於在將來某個時刻取消間歇呼叫。要取消尚未執行的間歇呼叫,可以使用clearInterval()方法並傳入相應的間歇呼叫ID。取消間歇呼叫的重要性要遠遠高於取消超時呼叫,因為在不加干涉的情況下,間歇呼叫將會一直執行到頁面解除安裝。以下是一個常見的使用間歇呼叫的例子。

var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
    num++;
    console.log('num',num)
    //如果執行次數達到了max 設定的值,則取消後續尚未執行的呼叫
    if (num == max) {
        clearInterval(intervalId);
        console.log("Done");
    }
}
intervalId = setInterval(incrementNumber, 500);

在這個例子中,變數num 每半秒鐘遞增一次,當遞增到最大值時就會取消先前設定的間歇呼叫。這個模式也可以使用超時呼叫來實現,如下所示。

var num = 0;
var max = 10;
function incrementNumber() {
    num++;
    console.log('num',num)
    //如果執行次數未達到max 設定的值,則設定另一次超時呼叫
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        console.log("Done");
    }
}
setTimeout(incrementNumber, 500);

可見,在使用超時呼叫時,沒有必要跟蹤超時呼叫ID,因為每次執行程式碼之後,如果不再設定另一次超時呼叫,呼叫就會自行停止。一般認為,使用超時呼叫來模擬間歇呼叫的是一種最佳模式。在開發環境下,很少使用真正的間歇呼叫,原因是後一個間歇呼叫可能會在前一個間歇呼叫結束之前啟動。