HTML本身不具备直接控制页面关闭或退出的能力，要实现相关功能需要结合JavaScript的window对象相关方法。不同的业务场景对应不同的实现逻辑，下面逐一介绍常见的实现方式。
关闭当前浏览器窗口
如果是通过JavaScript脚本打开的窗口，可以直接调用window.close()方法关闭。如果是用户手动打开的窗口，大部分现代浏览器出于安全考虑，不允许直接关闭，会提示无法关闭非脚本打开的窗口。
以下是一个简单的关闭按钮示例，点击按钮尝试关闭当前窗口：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关闭窗口示例</title>
</head>
<body>
<button onclick="closeWindow()">关闭当前页面</button>
<script>
function closeWindow() {
// 尝试关闭当前窗口
window.close();
// 部分浏览器关闭失败时可以给出提示
setTimeout(() => {
if (!window.closed) {
alert("当前窗口无法被直接关闭，请手动关闭标签页");
}
}, 100);
}
</script>
</body>
</html>
关闭由脚本打开的子窗口
如果是通过window.open()方法打开的子窗口，可以直接获取到子窗口的引用，然后调用其close()方法关闭，这种方式在现代浏览器中基本都可以正常生效。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打开并关闭子窗口示例</title>
</head>
<body>
<button onclick="openChildWindow()">打开子窗口</button>
<button onclick="closeChildWindow()">关闭子窗口</button>
<script>
let childWindow = null;
// 打开子窗口
function openChildWindow() {
childWindow = window.open("https://ipipp.com", "_blank", "width=400,height=300");
}
// 关闭子窗口
function closeChildWindow() {
if (childWindow && !childWindow.closed) {
childWindow.close();
childWindow = null;
} else {
alert("子窗口未打开或已经关闭");
}
}
</script>
</body>
</html>
页面关闭前的提示处理
很多时候我们需要在用户关闭页面之前给出提示，比如提示用户保存未提交的数据。可以通过监听beforeunload事件来实现，不过现代浏览器对提示内容有严格限制，只能显示默认的提示文案，无法自定义具体文字。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关闭前提示示例</title>
</head>
<body>
<p>请在此页面输入内容，关闭页面时会触发提示</p>
<textarea style="width: 300px; height: 150px;"></textarea>
<script>
// 监听页面关闭前事件
window.addEventListener("beforeunload", function (e) {
// 现代浏览器会忽略自定义文案，只显示默认提示
e.preventDefault();
// 兼容旧浏览器的写法
e.returnValue = "";
});
</script>
</body>
</html>
注意事项
- 现代浏览器出于安全策略，禁止脚本关闭非脚本打开的顶层窗口，所以直接调用
window.close()关闭用户手动打开的页面大概率会失败。 beforeunload事件的提示功能不要滥用，频繁触发会让用户感到困扰，浏览器也可能会限制其生效。- 关闭子窗口时需要先判断子窗口是否存在且未被关闭，避免出现报错。
- 如果是在iframe内嵌页面中想要关闭外层页面，需要结合具体的同源策略判断，不同域的情况下无法直接操作外层窗口。
HTMLJavaScriptwindow_close页面关闭浏览器交互修改时间：2026-06-15 15:42:26