瀏覽器物件模型 (BOM)
瀏覽器物件模型(Browser Object Model (BOM))尚未正式標準。
由於現代瀏覽器已經(幾乎)實作了 JavaScript 互動性方面的相同方法和屬性,因此常被認為是 BOM 的方法和屬性。
window 物件
瀏覽器開啟一個文檔,就建立了一個 window 對象,即 window 物件表示瀏覽器中開啟的視窗。
window 物件是全域對象,可以把視窗的屬性當作全域變數來使用。例如,可以只寫 document,不必寫 window.document。同樣,可以把目前視窗物件的方法當作函數來使用,如只寫 alert(),而不必寫 Window.alert()。
如果文件包含框架(frame),瀏覽器會為文件建立一個 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() - 調整目前視窗的尺寸