JavaScript 視窗

在本教程中,你將瞭解 JavaScript 視窗物件。

視窗物件

window 物件表示包含 DOM 文件的視窗。視窗可以是主視窗,框架集或單個框架,甚至是使用 JavaScript 建立的新視窗。

如果你還記得前面的章節,我們在指令碼中使用了 alert() 方法來顯示彈出訊息。這是 window 物件的一種方法。

在接下來的幾章中,我們將看到 window 物件的一些新方法和屬性,使我們能夠做一些事情,例如提示使用者獲取資訊、確認使用者操作、開啟新視窗等,這樣可以為你新增更多互動性網頁。

計算視窗的寬度和高度

window 物件提供了 innerWidthinnerHeight 屬性,用於查詢瀏覽器視窗視區的寬度和高度(以畫素為單位),包括水平和垂直滾動條(如果已渲染)。這是一個點選按鈕時顯示視窗當前大小的示例:

<script>
function windowSize(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Get Window Size</button>

但是,如果要查詢除滾動條之外的視窗的寬度和高度,可以使用任何 DOM 元素的 clientWidthclientHeight 屬性(比如 div),如下所示:

<script>
function windowSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert("Width: " + w + ", " + "Height: " + h);
}
</script>
 
<button type="button" onclick="windowSize();">Get Window Size</button>

注意:document.documentElement 物件表示檔案的根元素,也就是 <html> 元素,而 document.body 物件表示 <body>元素。所有主流瀏覽器都支援這兩種。