当用户试图关闭选项卡或窗口时，我想实现一个自定义的确认弹出窗口(看起来不像JS警报(。我已经检查了很多类似的问题，所有的解决方案都很旧，现在所有现代浏览器都不赞成在这个弹出窗口上自定义文本。
我有下面的代码处理默认的JS警报类型消息，但有可能自定义它吗？请提出建议。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<title>Leave Site Pop-up</title>
<body>
<h1>My First Heading</h1>
<input name="name" id="name"/>
<script type="text/javascript">
const beforeUnloadListener = (event) => {
event.preventDefault();
return event.returnValue = "Are you sure you want to exit?";
};
const nameInput = document.querySelector("#name");
nameInput.addEventListener("input", (event) => {
if (event.target.value !== "") {
addEventListener("beforeunload", beforeUnloadListener, {capture: true});
} else {
removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
}
});
</script>
</body>
</html>
出于安全原因，无法显示此特定交互的自定义警告。
诈骗网站滥用该功能，试图恐吓人们在那里呆更长时间，以至于浏览器供应商甚至不得不取消定制提示信息的功能。你肯定无法展示你自己的警报/模式风格——想象一下，如果这类网站选择这样做，然后什么都不显示：你会被困在网站上，无法退出。
老实说，无论如何，自定义它并没有什么意义——对于很多用户来说，关闭选项卡的UI是他们浏览器的一部分，而不是你的网站，这是有道理的。花时间建立某种保存机制可能会更有用，这样，如果人们真的关闭了网站，你可以在他们回来时把他们带回他们离开的地方。可以使用localStorage/navigator.beaconAPI在beforeUnload中执行此操作(具体取决于要存储数据的位置(。
以下是一些想法：
如果你想在默认的确认弹出窗口后显示一个自定义的提醒框/显示你自己的自定义html弹出窗口，你可以这样做：(在这个例子中，我制作了一个带有文本hi!的提醒框(
const beforeUnloadListener = (event) => {
setTimeout(() => alert('hi!'));
event.preventDefault();
return event.returnValue = "Are you sure you want to exit?";
};
如果你想在使用之前显示一个警告框/显示你自己的自定义html弹出窗口，甚至按下关闭选项卡按钮，你可以在鼠标离开html文档时显示一个框：
const mouseLeaveListener = (event) => {
alert('Where are you going?');
};
document.addEventListener('mouseleave', mouseLeaveListener);