JavaScript Window - 瀏覽器對象模型

瀏覽器對象模型（Browser Object Model (BOM)）允許 JavaScript 與瀏覽器對話。

瀏覽器對象模型（Browser Object Model (BOM)）

不存在瀏覽器對象模型（BOM）的官方標準。

現代的瀏覽器已經（幾乎）實現了 JavaScript 交互相同的方法和屬性，因此它經常作為 BOM 的方法和屬性被提到。

Window 對象

所有瀏覽器都支持 window 對象。它代表瀏覽器的窗口。

所有全局 JavaScript 對象，函數和變量自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

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

甚至（HTML DOM 的）document 對象也是 window 對象屬性：

window.document.getElementById("header");

等同于：

document.getElementById("header");

窗口尺寸

兩個屬性可用用于確定瀏覽器窗口的尺寸。

這兩個屬性都以像素返回尺寸：

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

親自試一試

該例顯示瀏覽器窗口的高度和寬度：（不包括工具欄和滾動條）

其他窗口方法

一些其他方法：

  • window.open() - 打開新窗口
  • window.close() - 關閉當前窗口
  • window.moveTo() -移動當前窗口
  • window.resizeTo() -重新調整當前窗口