如何自定义浏览器上的默认警告弹出窗口？

Question

我正在运行 Angular 12 项目，当用户在进程仍在运行时尝试离开/刷新页面时，我想用 Angular 对话框替换默认警告对话框（删除默认对话框，显示 Angular 对话框）？我有什么办法可以做到吗？谢谢你的帮助

在此输入图片描述

Answer 1

大多数情况下，无法自定义页面关闭/卸载时客户端应用程序向用户显示的对话框。这主要是因为对话框是浏览器功能，而不是 HTML/DOM 或相关功能，这与

alert()

、

confirm()

和

prompt()

对话框的规则相同。

可以提示某些浏览器向用户显示什么消息，但只有一些浏览器会真正使用它。

我认为有一些浏览器，但很少是定制的，可能允许使用CSS来改变一些东西（比如浏览器主题）......但它不会被广泛使用，除非你控制用户使用的浏览器会用。

测试一下：

// Avoid this. Use only when there really exists unsaved data.
window.addEventListener
(
  'beforeunload', beforeUnloadEvent =>
  {
    beforeUnloadEvent.preventDefault();
    
    beforeUnloadEvent.returnValue =
    (
      // Simply a customized confirmation message in targeted language.
      'Existem dados que não foram salvos, deseja realmente sair?'
    );
    
    console.log('Customized message:',beforeUnloadEvent.returnValue);
    
    // Retrocompatibility
    return beforeUnloadEvent.returnValue;
  }
);
unloadButton.addEventListener
(
  'click', clickEvent =>
  {
    document.location = 'about:blank';
  }
);

<button id="unloadButton">Unload</button>

顺便说一句，我认为允许（有限制）应用程序为浏览器设置主题会非常酷...例如：

::theme:dialog
{
  background-color: white;
  color: red;
  border: 4px solid black;
}

提出功能请求怎么样？