【JS BOM】Window – 了解window 对象

在本教程中，您将了解 JavaScript 窗口对象，它是浏览器中 JavaScript 的全局对象，暴露了浏览器的功能。

Window对象是全局的

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

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

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

输出：

1
counter 1

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

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

Window对象公开浏览器的功能

窗口对象将 Web 浏览器的功能暴露给网页。

1) 窗口大小

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

• 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;

2) 打开一个新窗口

要打开一个新窗口或选项卡，您可以使用 window.open() 方法：

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

window.open() 方法接受三个参数：要加载的 URL、窗口目标和一串窗口功能。

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

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

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

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

该代码在新选项卡中打开 about.html 页面。 如果您指定窗口的高度和宽度，它将在新的分隔窗口而不是新选项卡中打开 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 网页加载到联系人窗口：

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);

3）调整窗口大小

要调整窗口大小，您可以使用窗口对象的 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’);

// shrink the window, or resize the window
// to 500×500
setTimeout(() => {
jsWindow.resizeBy(-100, -100);
}, 3000);

4) 移动窗口

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

window.moveTo(x, y);

在此方法中，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);

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

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

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

5）关闭一个窗口

要关闭窗口，您可以使用 window.open() 方法：

window.open()

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

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

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

6) window.opener 属性

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

总结

窗口是网络浏览器中的全局对象。

窗口对象公开了网络浏览器的功能。

窗口对象提供了操作窗口的方法，例如 open()、resize()、resizeBy()、moveTo()、moveBy() 和 close()。