刷新页面时Aurelia弹出不起作用答案

【问题标题】：Aurelia popup when refreshing the page not working刷新页面时Aurelia弹出不起作用
【发布时间】：2018-02-12 19:30:20
【问题描述】：

我们知道，当我们点击浏览器上的刷新按钮时，我们可以弹出一个询问是否确定刷新页面。通常是通过在 onbeforeunload 上添加一个事件监听器来完成的。

但是，在我的 Aurelia 应用程序中，我尝试这样做，但它不起作用。

假设这是我的 app.js（根 ModelView）

export class App {

this.refreshClicked = () =>{ return "Are you sure you want to exit?"; };

attached(){
window.addEventListener("onbeforeunload", this.refreshClicked);
}

但是它不起作用，但是，如果我们将 return 语句替换为 console.log("clicked") 我可以看到侦听器可以正常工作。

有什么帮助吗？

【问题讨论】：

你需要在你的字符串周围添加一个confirm 方法。 return confirm("Are you sure you want to exit?") 现在你只是返回一个字符串。
@JessedeBruijne 是的，我意识到了，谢谢。
您是否尝试过使用 canDeactivate() 回调？

标签： onbeforeunload aurelia

【解决方案1】：

首先，如果您通过window.addEventListener 添加事件处理程序，则在这种情况下不要使用on 前缀。所以它是：

attached() {
    window.addEventListener('beforeunload', this.refreshClicked);
}

或更旧的、不推荐的语法：

attached() {
    window.onbeforeunload(this.refreshClicked);
}

其次，您需要在Event 对象上设置returnValue 属性，并返回相同的字符串值以支持更多浏览器。要了解有关此事件（以及各种浏览器怪癖）的更多信息，请查看its MDN page。

您的refreshClicked 应如下所示：

this.refreshClicked = e => {
    const confirmation = 'Are you sure you want to exit?';
    e.returnValue = confirmation;
    return confirmation;
};

【讨论】：

好的，快速修改我之前的评论。现在它运行良好，但似乎我需要单击应用程序窗口上的任意位置，然后再单击浏览器中的刷新按钮，以便我们检测刷新。如果我不点击我的应用程序，有没有办法检测刷新？我的意思是只需打开应用程序，然后单击刷新，而无需单击应用程序窗口中的任何位置..
顺便说一句，消息没有显示，我总是得到：此页面要求您确认要离开 - 您输入的数据可能不会被保存。：
developer.mozilla.org/en-US/docs/Web/Events/beforeunload 第一个问题：> 注意：为了防止不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非该页面已与之交互，甚至可能根本不显示它们.第二个问题： > 有些浏览器会在对话框中显示返回的字符串，但有些浏览器会显示自己的消息。您可以在该页面的浏览器兼容性下查看自定义消息支持。