JavaScript Window - 瀏覽器物件模型

JavaScript Window - 瀏覽器物件模型

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

瀏覽器物件模型 (BOM)

瀏覽器物件模型(Browser Object Model (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.clientHeightdocument.documentElement.clientWidth

或者

document.body.clientHeightdocument.body.clientWidth

其他Window 方法

一些其他方法:

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


繼續學習
||
<!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>