Javascript之BOM(window对象)详解

什么是BOM

在Web页面中，JavaScript可以调用浏览器提供的API，这些API就组成了BOM。BOM（浏览器对象模型）提供了一组对象，并且每个对象都有相关的属性和方法，可以操作浏览器窗口。BOM除了提供了访问浏览器接口的对象外，还提供了访问用户代理信息的导航对象。其中，window对象是BOM最重要的对象之一。

window对象

window对象是BOM中最顶层的对象，可以通过它来访问浏览器中打开的文档和其它所有的交互API。

窗口位置和大小

window对象有一些属性可以获取浏览器窗口的位置和大小。如下所示：

console.log(window.innerWidth); // 返回浏览器窗口的文档显示区的宽度
console.log(window.innerHeight); // 返回浏览器窗口的文档显示区的高度
console.log(window.outerWidth); // 返回浏览器窗口的整个宽度，包括边框和滚动条
console.log(window.outerHeight); // 返回浏览器窗口的整个高度，包括边框和滚动条
console.log(window.pageXOffset); // 返回文档在窗口左上角开始的水平偏移量
console.log(window.pageYOffset); // 返回文档在窗口左上角开始的垂直偏移量

窗口导航

window对象提供了一些导航方法，可以用来操作浏览器的历史记录。如下所示：

console.log(window.history.length); // 返回当前窗口的历史记录中的URL数量
window.history.back(); // 退回到浏览器历史记录中的上一个URL
window.history.forward(); // 前进到浏览器历史记录中的下一个URL
window.history.go(1); // 前进到浏览器历史记录中的下一个URL
window.history.go(-1); // 退回到浏览器历史记录中的上一个URL

窗口位置和重载

window对象提供了一些方法，可以用来重新加载窗口或改变窗口的位置。如下所示：

window.location.reload(); // 重新加载当前窗口
window.location.href = "https://www.example.com"; // 改变当前窗口的URL地址并打开新的URL
window.resizeTo(800, 600); // 将当前窗口的大小设置为800x600
window.moveTo(0, 0); // 将当前窗口的位置设置为窗口左上角

示例1

下面的代码演示了如何打开一个新窗口并显示特定的网页：

function openWindow(url) {
  window.open(url);
}

点击按钮调用openWindow函数打开新窗口，代码如下：

<button onclick="openWindow('https://www.example.com')">打开新窗口</button>

示例2

下面的代码演示如何使用setTimeout函数延迟3秒关闭窗口：

function closeWindow() {
  setTimeout(function() {
    window.close();
  }, 3000);
}

在关闭窗口之前会等待3秒，代码如下：

<button onclick="closeWindow()">关闭窗口</button>

总结

本文介绍了BOM中最重要的对象window及其常用属性和方法。了解BOM及其组成的对象可以更好地掌握JavaScript中与浏览器交互的能力。