JavaScript 窗口

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

window 对象是全局的

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

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

console.log(window.counter);
window.showCounter();
Code language: JavaScript (javascript)

输出

1
counter 1

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

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

window 对象公开浏览器的功能

window 对象将网页浏览器的功能公开给网页。

1) 窗口大小

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;    
Code language: JavaScript (javascript)

2) 打开一个新窗口

要打开一个新窗口或标签页，请使用 window.open() 方法

window.open(url, windowName, [windowFeatures]);
Code language: CSS (css)

window.open() 方法接受三个参数：要加载的 URL、窗口目标以及窗口特征的字符串。

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

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

例如，要打开一个新窗口以加载本地主机的 about.html 页面，请使用以下代码

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

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

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

let jsWindow = window.open(url, 'about', features);Code language: JavaScript (javascript)

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

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

将所有内容放在一起。以下代码打开一个新窗口，加载 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);Code language: JavaScript (javascript)

3) 调整窗口大小

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

window.resizeTo(width,height);Code language: JavaScript (javascript)

以下示例打开一个新窗口，加载 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);Code language: JavaScript (javascript)

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

window.resizeBy(deltaX,deltaY);Code language: JavaScript (javascript)

例如

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

// shrink the window, or resize the window 
// to 500x500
setTimeout(() => {
    jsWindow.resizeBy(-100, -100);
}, 3000);Code language: JavaScript (javascript)

4) 移动窗口

要将窗口移动到指定的坐标，请使用 moveTo() 方法

window.moveTo(x, y);Code language: JavaScript (javascript)

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

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

setTimeout(() => {
    jsWindow.moveTo(500, 500);
}, 3000);Code language: JavaScript (javascript)

类似地，您可以将当前窗口移动指定数量

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

setTimeout(() => {
    jsWindow.moveBy(100, -100);
}, 3000);Code language: JavaScript (javascript)

5) 关闭窗口

要关闭窗口，请使用 window.open() 方法

window.open()Code language: JavaScript (javascript)

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

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

setTimeout(() => {
    jsWindow.close();
}, 3000);
Code language: JavaScript (javascript)

6) window.opener 属性

新创建的窗口可以通过 window.opener 属性引用回打开它的窗口。这使您可以在两个窗口之间交换数据。

摘要

• window 是网页浏览器中的全局对象。
• window 对象公开网页浏览器的功能。
• window 对象提供用于操纵窗口的方法，例如 open()、resize()、resizeBy()、moveTo()、moveBy() 和 close()。