JavaScript Window - 瀏覽器物件模型

標籤：包括   dom   size   自動   doc   因此   其他   ||   有關   

1.JavaScript Window - 瀏覽器物件模型

1.1瀏覽器物件模型 (BOM)

瀏覽器物件模型（Browser Object Model (BOM)）尚無正式標準。

由於現代瀏覽器已經（幾乎）實現了 JavaScript 互動性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

1.2Window 對象

所有瀏覽器都支援 window 對象。它表示瀏覽器視窗。

所有 JavaScript 全域對象、函數以及變數均自動成為 window 對象的成員。

全域變數是 window 對象的屬性。

全域函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

window.document.getElementById("header");

與此相同：

document.getElementById("header");

1.3Window 尺寸

有三種方法能夠確定瀏覽器視窗的尺寸。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 瀏覽器視窗的內部高度(包括捲軸)
• window.innerWidth - 瀏覽器視窗的內部寬度(包括捲軸)

對於 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

該例顯示瀏覽器視窗的高度和寬度：（不包括工具列/捲軸）

1.4其他 Window 方法

一些其他方法：

• window.open() - 開啟新視窗
• window.close() - 關閉當前視窗
• window.moveTo() - 移動當前視窗
• window.resizeTo() - 調整當前視窗的尺寸

2.JavaScript Window Screen

window.screen 對象包含有關使用者螢幕的資訊。

2.1Window Screen

screen.availWidth 屬性返回訪問者螢幕的寬度，以像素計，減去介面特性，比如視窗工作列。

2.2Window Screen 可用寬度

<script>document.write("可用寬度: " + screen.availWidth);</script>

2.3Window Screen 可用高度

screen.availHeight 屬性返回訪問者螢幕的高度，以像素計，減去介面特性，比如視窗工作列。

<script>document.write("可用高度: " + screen.availHeight);</script>

 

JavaScript Window - 瀏覽器物件模型