JavaScript 視窗


瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

瀏覽器物件模型(BOM)

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

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

Window 物件

所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。

所有 JavaScript 全域物件、函數、變數均自動成為 window 物件的成員。

全域變數是 window 物件的屬性。

全域函數是 window 物件的方法。

甚至 HTML DOM 的 document 也是 window 物件的屬性之一：

window.document.getElementById("header");

與此相同：

# document.getElementById("header");

Window 尺寸

有三種方法能夠決定瀏覽器視窗的尺寸（瀏覽器的視窗，不包括工具列和捲軸）。

對於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 方案（涵蓋所有瀏覽器）：

##實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

執行實例»點擊"執行實例" 按鈕可查看線上實例

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

其他Window 方法

#一些其他方法：

  • window.open( ) - 開啟新視窗

  • window.close() - 關閉目前視窗

    • ##window.moveTo() - 移動目前視窗

    • window.resizeTo() - 調整目前視窗的尺寸

→