JavaScript 視窗

Created: October-14, 2018

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

視窗物件

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

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

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

計算視窗的寬度和高度

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

<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 元素的 clientWidth 和 clientHeight 屬性（比如 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>元素。所有主流瀏覽器都支援這兩種。