离开带有未保存表单(打字稿)的页面时发出警报

Question

我有带有代码的ts脚本来处理"unsaved"文本输入

这是脚本代码

export class Unsave {
public static unsave_check(): void {
let unsaved = false;
$(":input").change(function(){ 
unsaved = true;
console.log(unsaved);
});
function unloadPage(){ 
if(unsaved){
return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
}
}
}
}

然后我在其他脚本中使用它，如下所示

`window.onbeforeunload = Unsave.unsave_check();`

但正如我所看到的，function unloadPage()从未被击中，为什么会这样？ 我看到未保存的值正在将值更改为 true。但是当我回去时，我没有收到任何警报消息。

如何解决此问题？

谢谢你的帮助

Answer 1

我认为您应该在表单初始化时调用Unsave.unsave_check()并在window.onbeforeunload上绑定unloadPage(您也可以将其设置为静态 - 或其他非静态并实例化对象的方法(。 您还应该将值unsaved从函数范围移动到私有类字段，以便两个方法都可以访问它

export class Unsave {
private unsaved: boolean = false;
public register() {
$(":input").change(() => {
this.unsaved = true;
console.log(this.unsaved);
});
}
public unloadPage() {
if (this.unsaved) {
return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
}
}
}
// call this after form init
const unsaveChecker = new Unsave();
unsaveChecker.register()
window.onbeforeunload = () => unsaveChecker.unloadPage()

Answer 2

你应该用这样的东西在window.onbeforeunload中调用unloadPage：

export class Unsave {
private static unsaved: boolean = false;
public static unsave_check(): void {
Unsave.unsaved = false;
$(":input").change(function(){ 
Unsave.unsaved = true;
console.log(Unsave.unsaved);
});
}
public static unloadPage(): string { 
if(Unsave.unsaved){
return "You have unsaved changes on this page. Do you want to     leave this page and discard your changes or stay on this page?";
}
}
}

然后window.onbeforeunload = Unsave.unloadPage();在代码中的其他地方，您必须调用unsave_check...
例如：

document.addEventListener("DOMContentLoaded", function() {
Unsave.unsave_check();
});

注意：unloadPage和unsave_check的命名不一致...一个骆驼案，一个蛇案？