JavaScript Window 全局对象

window 对象 Web 是浏览器中的全局对象。window 对象公开 Web 浏览器的功能并提供操作窗口的方法

August 26, 2023

4 min read

在本教程中，您将了解 JavaScript window 对象，它是浏览器的全局对象，并公开浏览器的功能的 API。

window 是全局对象

在 Web 浏览器 JavaScript 的全局对象是 window 对象。这意味着所有使用 var 关键字声明的变量和函数都成为全局 window 对象的属性和方法。例如：

var counter = 1;
var showCounter = () => console.log(counter);

console.log(window.counter);
window.showCounter();

输出：

1
counter 1

因为 counter 变量和 showCounter() 函数是使用 var 关键字在全局声明的，所以它们会自动添加到 window 对象中。

如果不想污染 window 对象，可以使用 let 关键字来声明变量和函数。

window 对象控制浏览器

window 对象向 JavaScript 公开 Web 浏览器的能力，允许你通过 window 对象控制浏览器。

窗口大小

window 对象有四个与窗口大小相关的属性：

innerWidth 和 innerHeight 属性返回浏览器窗口内页面视口的大小（不包括边框和工具栏）。
outerWidth 和 outerHeight 属性返回浏览器窗口本身的大小。

此外，document.documentElement.clientWidth 和document.documentElement.clientHeight 属性指示页面视口的宽度和高度。

要获取窗口的大小，请使用以下代码片段：

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

打开一个新窗口

要打开新窗口或标签页，请使用 window.open() 方法。window.open() 方法接受三个参数：要加载的 URL、窗口的名称和窗口功能特性。

window.open(url, windowName, [windowFeatures]);

第三个参数是命令分隔的设置字符串，指定新窗口的显示信息，例如宽度、高度、菜单栏和可调整大小。

window.open() 方法返回一个 WindowProxy 对象，该对象是 window 对象的封装。如果无法打开新窗口，则返回 null。

例如，要在本地主机打开一个新窗口加载 about.html 页面，请运行以下代码：

let url = 'http://localhost/js/about.html';
let jsWindow = window.open(url,'about');

该代码在新标签页中打开页面 about.html。如果指定窗口的 height 和 width，它将在新的单独窗口而不是新标签页中打开 URL：

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

要在现有窗口上加载另一个 URL，请将现有窗口名称传递给 window.open() 方法。以下示例将网页 contact.html 加载到 about 窗口：

window.open('http://localhost/js/contact.html','about');

把它们放在一起之后。以下代码打开一个新窗口来加载 about.html 网页，然后 3 秒后在同一窗口中加载网页 contact.html：

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

setTimeout(() => {
    window.open('http://localhost/js/contact.html', 'about')
}, 3000);

调整窗口大小

要调整窗口大小，可以使用 window对象的 resizeTo() 方法：

window.resizeTo(width,height);

下面的示例打开一个新窗口，加载 http://localhost/js/about.html 页面 3 秒后将窗口大小调整为(600,300)：

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=800');

setTimeout(() => {
    jsWindow.resizeTo(600, 300);
}, 3000);

window.resizeBy() 方法允许您将当前窗口的大小调整指定的量：

window.resizeBy(deltaX,deltaY);

例如：

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

// 缩小窗口大小为 500x500
setTimeout(() => {
    jsWindow.resizeBy(-100, -100);
}, 3000);

移动窗口

要将窗口移动到指定坐标，可以使用 window 对象的 moveTo() 方法：

window.moveTo(x, y);

在此方法中，x 和 y 是要移动到的水平和垂直坐标。以下示例打开一个新窗口并在 3 秒后将其移动到坐标 (500,500)：

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveTo(500, 500);
}, 3000);

同样，您可以将当前窗口移动指定的量：

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveBy(100, -100);
}, 3000);

关闭窗口

要关闭窗口，可以使用 window 对象的 window.close() 方法：

window.close()

以下示例打开一个新窗口并在 3 秒后关闭它：

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    window.close();
}, 3000);