关闭选项卡前的确认弹出窗口

Question

I want to implement a custom confirmation pop-up (that does not look like a JS alert) when user tries to close the tab or window.当用户尝试关闭选项卡或 window 时，我想实现自定义确认弹出窗口（看起来不像 JS 警报）。 I have checked many similar questions already and all the solutions are really old, where customizing the text on this pop-up is now deprecated for all the modern browsers.我已经检查了许多类似的问题，并且所有解决方案都非常旧，现在所有现代浏览器都不推荐在此弹出窗口上自定义文本。

I have below code working with default JS alert type message, but is it anyway possible to customize this?我有下面的代码使用默认的 JS 警报类型消息，但无论如何都可以自定义它吗？ Please suggest.请建议。

<!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>

Answer 1

Here's a few ideas:这里有一些想法：

If you want to show a custom alert box / show your own custom html popup AFTER the default confirmation popup, you can do this: (In this example I made an alert box with the text hi! )如果您想在默认确认弹出窗口之后显示自定义警报框/显示您自己的自定义 html 弹出窗口，您可以这样做：（在此示例中，我制作了一个带有文本hi!的警报框）

const beforeUnloadListener = (event) => {
    setTimeout(() => alert('hi!'));
    event.preventDefault();
    return event.returnValue = "Are you sure you want to exit?";
};

If you want to show an alert box / show your own custom html popup BEFORE the use even presses the close tab button, you can show a box whenever the mouse leaves the html document:如果您想在使用甚至按下关闭选项卡按钮之前显示一个警告框/显示您自己的自定义 html 弹出窗口，您可以在鼠标离开 html 文档时显示一个框：

const mouseLeaveListener = (event) => {
    alert('Where are you going?');
};
document.addEventListener('mouseleave', mouseLeaveListener);

Answer 2

There's no way to show a custom warning for this particular interaction, for security reasons.出于安全原因，无法针对此特定交互显示自定义警告。

Scam websites abused the functionality to try and scare people into staying there for longer, to the point where browser vendors even had to remove the ability to customise the prompt message.诈骗网站滥用该功能试图恐吓人们在该网站停留更长时间，以至于浏览器供应商甚至不得不取消自定义提示消息的功能。 You definitely can't show your own style of alert / modal --- imagine if those sorts of websites opted into doing that, and then just showed nothing: you'd be effectively trapped on the site with no way to exit it.你绝对不能展示你自己的警报/模态风格——想象一下，如果那些网站选择这样做，然后什么也没显示：你会被有效地困在网站上而无法退出。

Honestly, there's not really much point to customising this anyway --- for a lot of users, it makes sense that the tab closing UI is part of their browser, not your site.老实说，无论如何自定义它并没有多大意义 --- 对于很多用户来说，标签关闭 UI 是他们浏览器的一部分，而不是您的网站是有道理的。 It would probably be more useful to spend time building some sort of save mechanism, so that if people do close the site, you can take them back to exactly where they left off when they come back.花时间建立某种保存机制可能会更有用，这样如果人们确实关闭了站点，您可以将他们带回到他们回来时离开的确切位置。 You can do this in beforeUnload , using the localStorage / navigator.beacon APIs (depending on where you want to store the data).您可以在beforeUnload中执行此操作，使用localStorage / navigator.beacon API（取决于您要存储数据的位置）。

关闭选项卡前的确认弹出窗口

问题描述

2 个解决方案

解决方案1
1 2022-08-28 06:32:51

解决方案2
1 2022-08-28 06:59:33

关闭选项卡前的确认弹出窗口

问题描述

2 个解决方案

解决方案1 1 2022-08-28 06:32:51

解决方案2 1 2022-08-28 06:59:33

解决方案1
1 2022-08-28 06:32:51

解决方案2
1 2022-08-28 06:59:33