window對象
BOM的核心是window,它表示浏覽器的一個執行個體,既是通過JavaScript通路浏覽器視窗的一個接口,又是global對象。
全局作用域
由于window對象扮演着global對象的一個角色,是以在全局作用域中定義的變量、函數都會變成window對象的屬性。
var age = 10;
function sayAge () {
alert(this.age);
}
alert(window.age); //10
sayAge(); //10
window.sayAge(); //10
由于sayAge()函數是在全局作用域下定義的,是以this引用的是window對象,是以this.age被映射為window.age了即10。
定義全局變量與直接在window上添加屬性還是有點差別的:全局變量不能通過delete操作删除,而直接在window上添加的屬性能通過delete操作符删除。
var age = 10; //定義全局變量
window.color = "blue"; //在window對象上添加屬性color
delete window.age;
delete window.color;
console.log(age); //10
console.log(window.color); //undefined 被删除了
用關鍵字var聲明的變量有個特性[[configurable]]預設值為false,是以該變量不能通過delete操作符删除。
要注意:嘗試通路未聲明的變量出報錯。但可以通過window來查詢某個可能未聲明的變量是否存在。
var a = b; //報錯,因為b未聲明
var a = window.b; //通過window來查詢b是否存在。
視窗關系與架構
frames[]
如果頁面中有多個架構,則每個架構都有自己的window對象,并儲存在frame[]對象中。可以通過 索引(從上到下、從左到右)通路。 傳回視窗中所有命名的架構。 該集合是 Window 對象的數組,每個 Window 對象在視窗中含有一個架構或 <iframe>。屬性 frames.length 存放數組 frames[] 中含有的元素個數。注意,frames[] 數組中引用的架構可能還包括架構,它們自己也具有 frames[] 數組。
可以通過 frames.length得到頁面中架構的個數。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript</title>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
<iframe src="http://www.baidu.com"></iframe>
<iframe src="http://www.baidu.com"></iframe>
<script>
/* 在此處書寫javascript代碼 */
console.log(window.frames.length); //3 定義了3個iframe架構
</script>
</body>
</html>
效果:

圖中,架構數量為3個。
視窗位置
screenLeft 和screenTop
這個兩個屬性分别表示 視窗 相對于 螢幕左邊和上邊的位置。當浏覽器是全屏時,這兩個屬性的值均為0,是以測試隻有縮小浏覽器視窗。
console.log(window.screenLeft);
console.log(window.screenTop);
效果:
screenX 和screenY
與上例達到的效果一樣。
視窗大小
outerWidth 和outerHeight
這兩個屬性傳回 浏覽器本身的尺寸,也就是整個浏覽器的尺寸。
innerWidth 和innerHeight
這兩個屬性傳回 頁面視圖區的尺寸。文檔顯示區的尺寸。
window常見方法
alert()
消息警告框,帶有資訊和一個确定按鈕的警告框。
window.alert("這是一段消息!");
效果:
confirm()
帶有指定消息、确定按鈕和取消按鈕的對話框,當點出确定按鈕時,該方法傳回true,當點出取消按鈕時,該方法傳回false。
window.confirm("點出确定還是取消?");
效果:
prompt()
顯示一個提示使用者可輸入的對話框。當使用者點選取消按鈕時,該方法傳回null,當點選确定按鈕時,該方法傳回使用者輸入的内容。
該方法有兩個參數,第一個參數是輸入框的标題,第二個參數是輸入框預設的内容。
window.prompt("這是輸入框的标題", "這是一段預設内容");
效果:
open()
打開一個視窗,有四個參數, 第一個參數是開打開的URL, 第二個參數是新視窗的名稱, 第三個參數是聲明要顯示的标準浏覽器的特性,可以是多個, 第四個參數是确定打開的新視窗是在曆史URL中建立一條新項目,還是替換目前頁面的URL,"true"表示替換,"false"表示建立條目。
注:第一個參數可以為空字元,表示打開浏覽器的 about:blank 頁。
還可以指定打開新視窗的方式:_black(新視窗打開) _self(目前視窗打開) _top()、parent(父級視窗打開)
還可以指定打開的新視窗的尺寸大小。
window.open("http://sina.com", false);