AngularJS如何在更改选项卡之前显示浏览器对话框保护

Question

我必须显示一条消息，在更改标签之前警告用户而不保存更改。浏览器中的URL在此过程中不会更改，因为用户仅更改选项卡。

SetPristine，SetDirty不会帮助我，因为网址不会改变。有没有办法手动显示此系统浏览器弹出窗口？如果没有，你可以告诉我如何在同一个空间创建相同的警报（它放在网站的顶部中心部分）。

我想得到类似下图的结果。

提前致谢：）

Answer 1

你要求的不仅仅是Angular。你可以用纯JavaScript来完成。

您要问的是beforeUnload事件。

以下是mozilla的一些示例代码：

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

此示例阻止了一个对话框，但显示了一个需要将返回值设置为对话框文本的对话框：

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  return "You will loose any unsaved changes, by leaving the page"
});

另一个mozilla页面详细解释了

这意味着您可以将其他代码放在将弹出模态说明的事件处理程序中，或者将其他对话框告知用户数​​据丢失。

如果您想要的更改标签，那么最干净的方法是立即使用Page Visibility API reasonably well supported。

你想要的更像是这样：

document.addEventListener("visibilitychange", handleVisibilityChange, false);