ASP.NET Core页面JavaScript自定义beforeunload提示框失效问题问询

现代浏览器（如Chrome、Edge）出于安全和统一用户体验的考虑，已经完全禁止自定义window.onbeforeunload事件的提示文本，无论你如何设置returnValue或尝试输出自定义消息，都会显示浏览器自带的「已做出更改...」这类默认提示。

要实现"仅在需要时触发提示"的需求，正确的做法是动态添加或移除beforeunload事件监听器，示例代码如下：

<body>
    <button onclick="activateReloader()">开启离开提示</button>
    <button onclick="deactivateReloader()">关闭离开提示</button>
    <script>
        function onBeforeUnload(e) {
            e.preventDefault();
            // 自定义alert不会生效，仅作演示
            // alert("我的自定义消息");
            e.returnValue = ''; // 必须设置此值才能触发默认提示
        }

        function activateReloader() {
            window.addEventListener('beforeunload', onBeforeUnload);
        }

        function deactivateReloader() {
            window.removeEventListener('beforeunload', onBeforeUnload);
        }
    </script>
</body>

核心说明 #

• 调用activateReloader()时，为window绑定beforeunload事件，此时用户刷新页面、关闭标签页时会触发浏览器默认提示
• 调用deactivateReloader()时，移除事件监听器，用户操作页面时不会再弹出提示
• 代码中e.returnValue = ''是触发默认提示的必要条件，不能省略

内容的提问来源于stack exchange，提问作者SoftWar