如何更改通过mailto打开的应用程序

Question

我有一个应用程序，用户可以在其中发送和接收电子邮件，例如 gmail、outlook。

但是当用户点击 时，会打开一个本地 Windows 应用程序。

与gmail相比，同样的'mailto' ref开启了自己的邮件发送功能。

如何将 mailto 调用更改为我创建的函数？

一些变化：

创建的应用程序是用“电子”制作的； 无法在 Windows 上将应用设置为默认应用，因为 Chrome 上的 gmail 不介意并打开自己的功能。

编辑：伪解决方案

我可以做的是编辑 API 返回给我的包含电子邮件的 html，并用我的函数替换 href mailto (String.replace)。 但这不是 gmail 使用的方式，我认为这不是有效的方式。

Answer 1

我在这里对您要做什么以及您要在哪里做一些假设，但是……

您可以 query for mailto 链接并附加一个 event listener 以取消默认操作（打开默认邮件应用程序），然后执行您需要执行的任何操作。

如果您有很多链接，您可能希望采用更有效的方法来附加侦听器（例如，附加到文档根目录并查询事件以查看它是否是电子邮件链接），但这里有一个快速的概念验证：

function emailHandler(e) {
  e.preventDefault();
  
  // do whatever you need to do...
  console.log(e.target.href);
}

document.querySelectorAll('[href^=mailto]').forEach(e => e.addEventListener('click', emailHandler));

<a href="mailto:one@example.com">Email One</a>
<a href="mailto:two@example.com">Email Two</a>
<a href="mailto:three@example.com">Email Three</a>

---

如果您想使用单个侦听器来处理它们（而不是附加到每个单独的 mailto 链接），您可以在容器元素（正文或其他）处侦听点击事件并在它们进入时询问它们：

function clickHandler(e) {
  if (e.target.href?.startsWith?.('mailto')) {
    e.preventDefault();    
    // do whatever you need to do...
    console.log(e.target.href);
  }  
}

document.body.addEventListener('click', clickHandler);

<a href="mailto:one@example.com">Email One</a>
<a href="mailto:two@example.com">Email Two</a>
<a href="mailto:three@example.com">Email Three</a>