JavaScript 窗口


目录

    显示目录


浏览器对象模型 (BOM) 允许 JavaScript 进行“对话” 浏览器。


浏览器对象模型 (BOM)

Browser O对象没有官方标准 模型模型 (BOM)。

由于现代浏览器已经实现了(几乎)相同的方法并且 JavaScript 交互性的属性,通常被称为方法和 BOM 的属性。


窗口对象

所有浏览器都支持 window 对象。它代表 浏览器的窗口。

所有全局 JavaScript 对象、函数和变量都会自动变为 窗口对象的成员。

全局变量是窗口对象的属性。

全局函数是窗口对象的方法。

甚至(HTML DOM 的)文档对象也是窗口的一个属性 目的:

window.document.getElementById("header");

是相同的:

document.getElementById("header");

窗口尺寸

可以使用两个属性来确定浏览器的大小 窗户。

这两个属性都返回尺寸 像素:

  • window.innerHeight - 浏览器窗口的内部高度(以像素为单位)

  • window.innerWidth - 浏览器窗口的内部宽度(以像素为单位)

浏览器窗口(浏览器视口)不包括工具栏和滚动条。

例子

let w = window.innerWidth;
let h = window.innerHeight;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Window</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Browser inner window width: " + window.innerWidth + "px<br>" +
"Browser inner window height: " + window.innerHeight + "px";
</script>

</body>
</html>

其他窗口方法

其他一些方法:

  • window.open() - 打开一个新窗口

  • window.close() - 关闭当前窗口

  • window.moveTo() - 移动当前窗口

  • window.resizeTo() - 调整当前窗口的大小