天天看點

JavaScript之window對象(BOM)window對象

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>
           

效果:

JavaScript之window對象(BOM)window對象

圖中,架構數量為3個。

視窗位置

screenLeft 和screenTop

這個兩個屬性分别表示 視窗 相對于 螢幕左邊和上邊的位置。當浏覽器是全屏時,這兩個屬性的值均為0,是以測試隻有縮小浏覽器視窗。

console.log(window.screenLeft);
console.log(window.screenTop);
           

效果:

JavaScript之window對象(BOM)window對象

screenX 和screenY

與上例達到的效果一樣。

視窗大小

outerWidth 和outerHeight

這兩個屬性傳回 浏覽器本身的尺寸,也就是整個浏覽器的尺寸。

innerWidth 和innerHeight

這兩個屬性傳回 頁面視圖區的尺寸。文檔顯示區的尺寸。

window常見方法

alert()

消息警告框,帶有資訊和一個确定按鈕的警告框。

window.alert("這是一段消息!");
           

效果:

JavaScript之window對象(BOM)window對象

confirm()

帶有指定消息、确定按鈕和取消按鈕的對話框,當點出确定按鈕時,該方法傳回true,當點出取消按鈕時,該方法傳回false。

window.confirm("點出确定還是取消?");
           

效果:

JavaScript之window對象(BOM)window對象

prompt()

顯示一個提示使用者可輸入的對話框。當使用者點選取消按鈕時,該方法傳回null,當點選确定按鈕時,該方法傳回使用者輸入的内容。

該方法有兩個參數,第一個參數是輸入框的标題,第二個參數是輸入框預設的内容。

window.prompt("這是輸入框的标題", "這是一段預設内容");
           

效果:

JavaScript之window對象(BOM)window對象

open()

打開一個視窗,有四個參數, 第一個參數是開打開的URL, 第二個參數是新視窗的名稱, 第三個參數是聲明要顯示的标準浏覽器的特性,可以是多個, 第四個參數是确定打開的新視窗是在曆史URL中建立一條新項目,還是替換目前頁面的URL,"true"表示替換,"false"表示建立條目。

注:第一個參數可以為空字元,表示打開浏覽器的 about:blank 頁。

還可以指定打開新視窗的方式:_black(新視窗打開) _self(目前視窗打開) _top()、parent(父級視窗打開)

還可以指定打開的新視窗的尺寸大小。

window.open("http://sina.com", false);
           

window對象的其它屬性和方法如下圖所示:

屬性

JavaScript之window對象(BOM)window對象

方法

JavaScript之window對象(BOM)window對象