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>元素。所有主流浏览器都支持这两种。