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

Question

我必须显示一条消息，在不保存更改的情况下更改选项卡之前警告用户。浏览器中的 url 在此过程中不会更改，因为用户仅更改了一个选项卡。

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

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

提前致谢:)

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
});

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

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

另一个 mozilla 页面解释得更详细

这意味着您可以将其他代码放入事件处理程序中，该事件处理程序将弹出模态提示或其他对话框以通知用户数据丢失。

如果你想要的实际上是改变tab，那么最干净的方法是现在使用Page Visibility API which is reasonably well supported。

你想要的更像是这样：

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

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

AngularJS how to show browser dialog protects before changing tab

javascript

alert

dom-events

angularjs