如何在mailto邮件正文中添加可点击的联系我们链接？代码问题咨询

问题描述 #

我有一个按钮，点击后通过mailto协议打开邮件客户端，要求邮件正文中包含指定文本，同时正文中需有可点击的“联系我们”链接，点击该链接可打开教练的邮箱。尝试了以下代码但无法实现预期功能：

<input type="button"; value="Click me"; onclick="window.location.herf='mailto:me@any.com?subject=Request%20invite&amp;body=Hallo%20you' + ' http://www.google.com' + 'HIIIIII' + 'window.open('mailto:address@dmail.com')'";>

错误原因 #

你之前的代码核心问题有两个：

1. 把JavaScript代码（window.open('mailto:address@dmail.com')）直接嵌入到mailto的body参数中——mailto协议的body仅支持纯文本内容，无法执行JS代码。
2. 拼写错误：window.location.herf应该是window.location.href。

邮件客户端中可点击的邮箱链接，本质是标准的mailto:邮箱地址格式文本，客户端会自动识别并渲染为可点击链接，不需要额外JS。

正确实现方式 #

简洁版代码 #

<input type="button" value="Click me" onclick="window.location.href='mailto:me@any.com?subject=Request%20invite&body=Hallo%20you%0A%0A如果有问题，请点击联系我们：%20mailto:coach@example.com%0A%0AHIIIIII';">

关键点说明 #

• 用%0A表示换行（两个%0A代表空行），让正文排版更清晰
• 直接将mailto:coach@example.com写入body参数，邮件客户端会自动识别为可点击链接，点击后将打开新邮件窗口发送至该邮箱
• 所有空格需转义为%20，确保参数传递不出现乱码

更易维护的写法 #

如果正文内容较长，建议将逻辑抽离到单独的JS函数中，避免onclick属性内代码过于冗长：

<input type="button" value="Click me" onclick="openMailClient();">

<script>
function openMailClient() {
  // 自动处理特殊字符转义
  const subject = encodeURIComponent('Request invite');
  const body = encodeURIComponent(`Hallo you

如果有问题，请点击联系我们：mailto:coach@example.com

HIIIIII`);
  
  window.location.href = `mailto:me@any.com?subject=${subject}&body=${body}`;
}
</script>

这种写法使用模板字符串让正文排版更直观，encodeURIComponent会自动处理空格、换行等特殊字符的转义，减少手动出错的概率。

内容的提问来源于stack exchange，提问作者Suha Alsafadi