Angular 15中如何捕获beforeunload弹窗的用户取消操作？

问题的核心在于：浏览器出于安全限制，beforeunload事件无法获取用户对确认弹窗的选择结果，你当前在beforeunload回调里直接执行this.endAudio()，会导致用户取消关闭时音频已经被终止。

正确的做法是拆分逻辑：

• 仅在beforeunload中触发确认弹窗，不执行音频终止操作
• 监听unload事件，只有当用户确认关闭页面时，再执行音频终止

修改后的代码实现：

handleUnexpectedPageClose(): void {
    // 监听beforeunload，仅触发确认弹窗
    const beforeUnloadSub = fromEvent(window, 'beforeunload').subscribe((event: BeforeUnloadEvent) => {
        event.preventDefault();
        event.returnValue = ''; // 触发浏览器默认确认弹窗
    });

    // 监听unload，用户确认关闭时才终止音频
    const unloadSub = fromEvent(window, 'unload').subscribe(() => {
        this.endAudio();
    });

    // 将两个订阅都加入清理队列
    this.masterSubscription.add(beforeUnloadSub);
    this.masterSubscription.add(unloadSub);
}

逻辑说明 #

• 当用户尝试关闭页面时，beforeunload触发，弹出确认对话框，但此时音频仍在播放
• 如果用户点击确认关闭，unload事件会触发，执行this.endAudio()终止音频
• 如果用户点击取消，unload不会触发，音频会继续播放，满足你需要确认用户听完整个片段的需求

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