关闭选项卡前的确认弹出窗口
[英]Confirmation Pop-up before closing the tab
问题描述
当用户尝试关闭选项卡或 window 时，我想实现自定义确认弹出窗口（看起来不像 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>
2 个解决方案
解决方案1
1 2022-08-28 06:32:51
这里有一些想法：
如果您想在默认确认弹出窗口之后显示自定义警报框/显示您自己的自定义 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);
解决方案2
1 2022-08-28 06:59:33
出于安全原因，无法针对此特定交互显示自定义警告。
诈骗网站滥用该功能试图恐吓人们在该网站停留更长时间，以至于浏览器供应商甚至不得不取消自定义提示消息的功能。 你绝对不能展示你自己的警报/模态风格——想象一下，如果那些网站选择这样做，然后什么也没显示：你会被有效地困在网站上而无法退出。
老实说，无论如何自定义它并没有多大意义 --- 对于很多用户来说，标签关闭 UI 是他们浏览器的一部分，而不是您的网站是有道理的。 花时间建立某种保存机制可能会更有用，这样如果人们确实关闭了站点，您可以将他们带回到他们回来时离开的确切位置。 您可以在beforeUnload中执行此操作，使用localStorage / navigator.beacon API（取决于您要存储数据的位置）。
在关闭弹出窗口之前将值传递给Java Bean
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.