【JS BOM】Window – 了解window 对象

JS BOM1年前 (2023)发布 admin
1,820 0

在本教程中,您将了解 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()。

© 版权声明

相关文章

暂无评论

暂无评论...