当前位置：首页 > JavaScript

js 实现窗口

2026-03-15 07:09:57JavaScript

使用 JavaScript 创建窗口

JavaScript 提供了多种方式来实现窗口操作，包括打开新窗口、关闭窗口、调整窗口大小等。以下是常见的几种方法。

打开新窗口

使用 window.open() 方法可以打开一个新窗口。该方法接受三个参数：URL、窗口名称和窗口特性。

// 打开一个新窗口
const newWindow = window.open('https://example.com', '_blank', 'width=500,height=400');

窗口特性参数可以指定窗口的大小、位置等属性。例如：

width=500：窗口宽度为 500 像素。
height=400：窗口高度为 400 像素。
top=100：窗口距离屏幕顶部 100 像素。
left=100：窗口距离屏幕左侧 100 像素。

关闭窗口

使用 window.close() 方法可以关闭当前窗口。注意，该方法只能关闭由 JavaScript 打开的窗口，或者当前窗口本身。

// 关闭当前窗口
window.close();

调整窗口大小

使用 window.resizeTo() 和 window.resizeBy() 方法可以调整窗口的大小。

// 将窗口调整为指定宽度和高度
window.resizeTo(500, 400);

// 相对于当前窗口大小调整宽度和高度
window.resizeBy(100, 50);

移动窗口位置

使用 window.moveTo() 和 window.moveBy() 方法可以移动窗口的位置。

// 将窗口移动到指定坐标
window.moveTo(100, 100);

// 相对于当前窗口位置移动
window.moveBy(50, 50);

窗口焦点

使用 window.focus() 和 window.blur() 方法可以控制窗口的焦点。

// 将焦点设置到窗口
window.focus();

// 将焦点从窗口移开
window.blur();

监听窗口事件

JavaScript 还提供了一些事件，可以监听窗口的状态变化。

监听窗口加载完成

window.addEventListener('load', function() {
    console.log('窗口加载完成');
});

监听窗口大小变化

window.addEventListener('resize', function() {
    console.log('窗口大小变化');
});

监听窗口关闭

window.addEventListener('beforeunload', function(event) {
    event.preventDefault();
    event.returnValue = '确定要离开吗？';
});

示例代码

以下是一个完整的示例，演示如何打开、调整和关闭窗口。

js 实现窗口

// 打开新窗口
const newWindow = window.open('', '_blank', 'width=500,height=400');

// 调整窗口大小
newWindow.resizeTo(600, 500);

// 移动窗口位置
newWindow.moveTo(100, 100);

// 关闭窗口
setTimeout(() => {
    newWindow.close();
}, 3000);