Angular:在关闭浏览器窗口之前显示材质弹出窗口

Posted

技术标签:

【中文标题】Angular:在关闭浏览器窗口之前显示材质弹出窗口【英文标题】:Angular: Show Material Popup before Closing Browser Window 【发布时间】:2020-11-21 23:49:49 【问题描述】:

当用户点击 Chrome 窗口关闭按钮(右上角)时,我正在尝试显示 Angular Material 对话框(弹出窗口)。 Dialog 模式应该提示用户,如果他们想要保存更改,或者取消,

但是,它只显示快速第二次的模式,然后在不等待用户的情况下关闭。 使用下面的代码参考。怎么解决?

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

【问题讨论】:

我认为必须有一部分代码告诉您要等到用户点击。在这里,您只是告诉在关闭之前显示弹出窗口。 【参考方案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()
    );

【讨论】:

谢谢,你能在下面显示完整的代码库吗? @HostListener('window:beforeunload', ['$event']) 刚试了,不行,直接关窗 试过这个,但它不起作用,你能分享任何stackblitz链接吗?【参考方案2】:

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

以上是关于Angular:在关闭浏览器窗口之前显示材质弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

javascript--自定义弹出登陆窗口(弹出窗)

百度统计 可以统计页面上的JS的弹出窗的打开次数吗? 怎么实现?

Angular Material:弹出窗口:允许窗口在前后之间移动

window.open 里的resizable=no参数在火狐里无效!有啥方法在火狐里的弹出窗不能拖动大小吗?

DuiVision开发教程(18)-弹出窗

强制关闭报文“打开此链接?”的弹出窗口]]