javascript - Angular: Show Material Popup before Closing Browser Window

Question

I am trying to show Angular Material Dialog Box (Popup window), when User hits the Chrome Window Close button (upper right). The Dialog modal should hold prompt the user, if they want to save changes, or cancel,

However it only shows the modal for quick second, then closes without waiting for user. Using code reference below. How can it be fixed ?

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()
    });
}  

Note: We do Not want to display Native chrome browser popup, but a custom popup .

Angular Material Dialog Box: https://material.angular.io/components/dialog

Answer 1

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

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

Answer 2

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

Answer 3

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()
    });
}