HTML 中的 mailto 链接 - JavaScript

在 HTML 中，可以使用 mailto 链接来创建电子邮件链接，让用户可以方便地发送电子邮件给特定的收件人。当用户点击这样的链接时，会自动启动其默认邮件客户端，填写好收件人地址，并设置好主题和正文。

创建 mailto 链接

在 HTML 中，可以使用如下代码创建一个 mailto 链接：

<a href="mailto:收件人地址">发邮件给收件人</a>

其中，href 属性的值以 mailto: 开头，后面跟着收件人的电子邮件地址。如果要同时发送邮件到多个收件人，可以在地址中使用逗号分隔多个收件人地址。例如：

<a href="mailto:收件人1@domain.com,收件人2@domain.com">发邮件给收件人1和收件人2</a>

如果需要在邮件中设置主题和正文，也可以在 href 属性中使用 subject 和 body 参数：

<a href="mailto:收件人地址?subject=邮件主题&body=邮件正文">发邮件给收件人</a>

这样，用户点击链接时就会启动默认邮件客户端，自动填写好收件人地址、主题和正文。

使用 JavaScript 动态设置 mailto 链接

除了在 HTML 中静态地创建 mailto 链接，还可以使用 JavaScript 动态设置链接的属性，以使链接能够根据用户的操作进行动态更改。

例如，可以为一个按钮添加 click 事件监听器，根据用户填写的表单内容来设置收件人地址、主题和正文，然后动态设置链接的 href 属性。

<input type="text" id="收件人地址">
<input type="text" id="邮件主题">
<textarea id="邮件正文"></textarea>
<button id="发送邮件按钮">发送邮件</button>

<script>
    const sendEmailButton = document.querySelector('#发送邮件按钮');
    sendEmailButton.addEventListener('click', () => {
        const recipient = document.querySelector('#收件人地址').value;
        const subject = document.querySelector('#邮件主题').value;
        const body = document.querySelector('#邮件正文').value;
        const mailtoHref = 'mailto:' + recipient + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
        sendEmailButton.setAttribute('href', mailtoHref);
    });
</script>

在这段代码中，当用户点击“发送邮件”按钮时，会获取填写在表单中的收件人地址、邮件主题和邮件正文，并使用 encodeURIComponent 函数对其中的特殊字符进行编码。然后，将这些信息拼接成完整的 mailto 链接，并将链接的 href 属性设置为这个值，以使链接指向当前表单填写的内容。

这样，当用户点击链接时，会启动默认邮件客户端，自动填写好收件人地址、主题和正文，这些信息就是根据当前表单内容来动态生成的。