重新加载页面时显示警报框，但不向前/向后导航

Question

我正在使用 angular2 + 框架，该框架具有这段代码，当用户决定刷新页面时（表单输入功能的一部分），该代码将触发警报窗口：

window.addEventListener('beforeunload', (e: any) => this.blockPageReloadRef(e));

它可以按预期工作，但是当用户向后/向前导航时，我不希望它起作用。有什么办法可以取消该事件，甚至可以取消该事件吗？

由于我有SPA应用程序，因此该应用程序不会在向后/向前导航中丢失状态，因此不需要显示警报窗口。

Answer 1

可以使用Javascript的navigation timing API解决此问题。 这是一个伪代码，可以帮助您解决问题。

//on route change you can trigger an event listener and check this =>

  if (performance.navigation.type == 1) {
    alert( "This page has been refreshed" );
  } else {
    console.info( "Route changed but not refreshed");
  }

最好将其包装在if块中，并首先检查是否存在window.performance对象。某些旧版浏览器不支持它。

如果您想在页面刷新前提示某些内容，请尝试类似=>

的操作

window.onbeforeunload = function(event)
{
    return confirm("Want to refresh for sure?");
};