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