如何在Blazor中检测用户离开页面/标签页并弹出确认提示？

你已经写好了核心的JavaScript逻辑，接下来只需要在Blazor组件中完成调用和生命周期管理即可，具体步骤如下：

1. 确保JavaScript脚本正确引入 #

把你提供的JS代码放到以下任意位置：

• 项目wwwroot目录下的独立JS文件（比如exit-handler.js），然后在_Host.cshtml（Blazor Server端）或index.html（Blazor WebAssembly端）中通过<script src="exit-handler.js"></script>引入
• 直接嵌入到_Host.cshtml/index.html的<script>标签内

2. 完善JavaScript脚本（添加事件移除逻辑） #

为了避免组件销毁后事件残留导致的异常，需要给你的JS对象新增事件移除方法：

window.exitTabFunctions = {
    setupExitTabDetection: function () {
        // 保存事件引用，方便后续移除
        this.beforeUnloadHandler = function (event) {
            event.preventDefault();
            event.returnValue = "Sure?";
            // 注意：多数现代浏览器会忽略自定义文本，统一显示浏览器自带的确认提示
            return "Sure?";
        };
        window.addEventListener("beforeunreload", this.beforeUnloadHandler);
    },
    removeExitTabDetection: function () {
        if (this.beforeUnloadHandler) {
            window.removeEventListener("beforeunreload", this.beforeUnloadHandler);
        }
    }
};

3. 在Blazor组件中调用JS方法 #

通过Blazor的IJSRuntime调用上述JS方法，同时处理组件生命周期的销毁逻辑：

Razor组件代码示例 #

@inject IJSRuntime JSRuntime
@implements IDisposable

<!-- 你的组件内容 -->

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用全局JS方法启用离开检测
            await JSRuntime.InvokeVoidAsync("exitTabFunctions.setupExitTabDetection");
        }
    }

    public void Dispose()
    {
        // 组件销毁时移除事件，避免全局残留
        _ = JSRuntime.InvokeVoidAsync("exitTabFunctions.removeExitTabDetection");
    }
}

关键注意事项 #

• 浏览器限制：现代浏览器（Chrome、Firefox等）会忽略event.returnValue的自定义文本，统一使用浏览器内置的确认提示内容，所以自定义文本可能不会显示
• 动态控制：如果仅需要在用户有未保存修改时触发提示，可以在组件中添加状态判断，动态调用setupExitTabDetection和removeExitTabDetection方法
• 生命周期安全：必须在组件销毁时移除事件，否则切换页面后，其他组件也会触发不必要的确认提示

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