在本教程中,您将了解 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 对象有四个与窗口大小相关的属性:

  • innerWidthinnerHeight 属性返回浏览器窗口内页面视口的大小(不包括边框和工具栏)。
  • outerWidthouterHeight 属性返回浏览器窗口本身的大小。

此外,document.documentElement.clientWidthdocument.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。如果指定窗口的 heightwidth,它将在新的单独窗口而不是新标签页中打开 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);

在此方法中,xy 是要移动到的水平和垂直坐标。以下示例打开一个新窗口并在 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);

window.opener 属性

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

结论

window 对象 Web 是浏览器中的全局对象。window 对象公开 Web 浏览器的功能。window 对象提供操作窗口的方法,例如 open()resize()resizeBy()moveTo()moveBy()close()