JavaScript Window - 瀏覽器物件模型

瀏覽器物件模型 (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() - 調整目前視窗的尺寸


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.moveTo(0,0) </script> </head> <body> <p>把新窗口移动到指定屏幕左上角(屏幕左上角为 0,0 坐标,往右和下计算为正)</p> </body> </html>