JavaScript window.close
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.close 方法。此方法允许开发人员以编程方式关闭浏览器窗口或选项卡。
基本定义
window.close 方法会关闭当前窗口或由 JavaScript 打开的窗口。此方法只能关闭由脚本打开的窗口。
出于安全原因，浏览器会限制关闭非 JavaScript 创建的窗口。该方法对用户直接打开的窗口无效。
基本的 window.close
此示例演示如何使用按钮关闭当前窗口。
<!DOCTYPE html>
<html>
<head>
<title>Basic window.close</title>
</head>
<body>
<button onclick="closeWindow()">Close Window</button>
<script>
function closeWindow() {
window.close();
}
</script>
</body>
</html>
在此基本示例中，我们有一个触发 closeWindow 函数的按钮。该函数调用 window.close() 来尝试关闭当前窗口。
请注意，这仅在窗口由 JavaScript 打开时才有效。大多数浏览器将阻止关闭用户直接打开的窗口。
关闭新打开的窗口
此示例展示了如何以编程方式打开然后关闭窗口。
<!DOCTYPE html>
<html>
<head>
<title>Open and Close Window</title>
</head>
<body>
<button onclick="openNewWindow()">Open Window</button>
<button onclick="closeNewWindow()">Close Window</button>
<script>
let newWindow;
function openNewWindow() {
newWindow = window.open('', '_blank', 'width=400,height=300');
newWindow.document.write('<h1>New Window</h1>');
}
function closeNewWindow() {
if (newWindow) {
newWindow.close();
}
}
</script>
</body>
</html>
这里我们有两个按钮——一个用于打开新窗口，另一个用于关闭它。window.open 方法创建一个新窗口，我们将其引用存储在 newWindow 变量中。
closeNewWindow 函数检查窗口是否存在，然后对窗口引用调用 close()。由于我们是用 JavaScript 创建的窗口，所以这会起作用。
延迟关闭窗口
此示例演示了在延迟后自动关闭窗口。
<!DOCTYPE html>
<html>
<head>
<title>Delayed Window Close</title>
</head>
<body>
<h1>This window will close in 5 seconds</h1>
<script>
setTimeout(function() {
window.close();
}, 5000);
</script>
</body>
</html>
在此示例中，我们使用 setTimeout 在 5000 毫秒（5 秒）后安排窗口关闭。当计时器到期时，匿名函数将调用 window.close()。
此技术可用于临时通知窗口或在完成特定任务后。请记住，它仅适用于 JavaScript 打开的窗口。
带确认的关闭窗口
此示例展示了如何在关闭窗口之前请求确认。
<!DOCTYPE html>
<html>
<head>
<title>Confirm Window Close</title>
</head>
<body>
<button onclick="tryCloseWindow()">Close Window</button>
<script>
function tryCloseWindow() {
if (confirm('Are you sure you want to close this window?')) {
window.close();
}
}
</script>
</body>
</html>
在这里，我们使用 confirm 对话框在尝试关闭窗口之前获取用户确认。如果用户单击“确定”，confirm 函数将返回 true。
这种模式通过防止意外关闭窗口提供了更好的用户体验。当窗口包含未保存的数据时，它尤其有用。
从子窗口关闭父窗口
此示例演示了如何从子窗口关闭父窗口。
<!DOCTYPE html>
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<button onclick="openChildWindow()">Open Child Window</button>
<script>
function openChildWindow() {
const child = window.open('child.html', '_blank', 'width=400,height=300');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Child Window</title>
</head>
<body>
<button onclick="closeParent()">Close Parent Window</button>
<script>
function closeParent() {
if (window.opener && !window.opener.closed) {
window.opener.close();
}
window.close();
}
</script>
</body>
</html>
在此示例中，父窗口打开一个子窗口。子窗口有一个按钮，它会尝试关闭自身及其父窗口。
window.opener 属性引用打开当前窗口的窗口。我们在对其调用 close() 之前检查它是否存在且尚未关闭。
来源
在本文中，我们展示了如何在 JavaScript 中使用 window.close。此方法对于管理 Web 应用程序中的浏览器窗口非常有用。
作者
列出 所有 JS DOM 教程。