Question

当用户点击“ Chrome窗口关闭”按钮（右上角）时，我试图显示“角度材料”对话框（弹出窗口）。对话框模式应保持提示用户，如果他们要保存更改或取消，

但是，它仅快速显示模态，然后关闭而无需等待用户。使用下面的代码参考。如何解决？

How can we detect when user closes browser?

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.openDocumentSaveDialog();
}


public openDocumentSaveDialog(): void {
    const documentSaveDialogRef = this.documentSaveDialog.open(DocumentSaveDialogComponent, {
        width: '600px',
        height: '200px',
        disableClose: true,
        autoFocus: false,
        data: null
    });

    documentSaveDialogRef.afterClosed().subscribe(result => {
        this.closeMenu.emit()
    });
}

注意：我们不想显示本机chrome浏览器弹出窗口，而是自定义弹出窗口。

“角材料”对话框： https://material.angular.io/components/dialog

Answer 1

beforeunload事件不支持返回承诺的回调函数，因此您无法显示弹出窗口和返回值，因为它不是同步操作。

您可以做的只是总是返回false或致电

event.preventDefault()

如果用户决定离开该页面，则可以致电

window.close(....)

如果尚未取消活动，则取消。

因此您的代码应如下所示

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.openDocumentSaveDialog();
    event.preventDefault();
    event.returnValue = '';
    return false;
}


public openDocumentSaveDialog(): void {
    const documentSaveDialogRef = 
this.documentSaveDialog.open(DocumentSaveDialogComponent, {
        width: '600px',
        height: '200px',
        disableClose: true,
        autoFocus: false,
        data: null
    });

    documentSaveDialogRef.afterClosed().subscribe(result => {
        if(!result)
           window.close()
        this.closeMenu.emit()
    });
}

Answer 2

恐怕浏览器安全性将不允许您阻止用户关闭窗口。我认为这是不可能的，您只能显示本机窗口，如果关闭浏览器窗口，则会警告用户有关丢失数据的信息。

Answer 3

这对我有用。但是您无法控制显示！

@HostListener('window:beforeunload', ['$event'])
  showAlertMessageWhenClosingTab($event) {
      $event.returnValue = 'Your data will be lost!';
  }

角度：关闭浏览器窗口之前显示材料弹出窗口

3 个答案: