Question

我正在使用window.beforeunload事件捕获数据更改并警告用户是否需要保存数据。根据Mozilla在线文档，如果我将事件返回值设置为null，则不会收到用户提示，并且事件将以静默方式处理。

“当此事件返回（或将returnValue属性设置为）非null或未定义的值时，将提示用户确认页面卸载。”

但是，我尝试将返回值设置为null和undefined，并将其视为字符串表示形式而不是实际值。下面的代码显示了我的事件处理程序。

@HostListener('window:beforeunload',['$event'])
  onUnload(e){

  e.returnValue = undefined;
  if(e.returnValue == "undefined"){
    console.log("Treated like string");
  }
  if(e.returnValue == undefined){
    console.log("treated like null value");
  }

}

无论我尝试未定义还是为null，所有情况下都会触发第一个if条件。我已验证第二个if语句不正确。

如果创建一个新变量并分配其值，我不会得到相同的行为。看起来这是对事件的returnValue属性的某种约束。有没有解决这个问题的简单方法。

Answer 1

来自MDN网络文档：

如果将字符串分配给returnValue Event属性，则会出现一个对话框，要求用户确认离开页面（请参见下面的示例）。一些浏览器在对话框中显示返回的字符串，而其他浏览器则显示自己的消息。如果未提供任何值，则事件将以静默方式处理。

请检查MDN web docs，以详细了解beforeunload事件。

  public get hasUnsavedData(): boolean {
    // some logic
    return false;
  }

  @HostListener('window:beforeunload',['$event'])
  onUnload(e){
    if (this.hasUnsavedData) {
      e.returnValue = 'You have unsaved changes...';
    }
    return;
  }

Answer 2

在此处发布，因为这太长了，无法包含在评论中。

我已经根据以上爆炸药的建议进行了这项工作。我不是要设置自定义消息。令人困惑的是，在调试器中，未设置的returnValue显示为空字符串“”，而不是空值。因此，我试图将其设置为null以满足MDN要求。如上所述，这是行不通的。明显的必要行为是，如果要获取对话框，则将returnValue设置为任何字符串，并且不设置返回值，而如果不希望使用对话框，则仅调用return（null）。这令人困惑，因为它是一个不平衡的功能。调用return（“ true”）不会触发对话框。您必须显式设置returnValue属性以触发对话框，并且如果不想触发对话框，则不能设置此值。我正在Angular中运行并使用@HostListener，所以这可能是该环境的副作用。

如何在typeScript

2 个答案: