当前位置：首页 > JavaScript

js实现mailto

2026-04-06 23:26:08JavaScript

使用JavaScript实现mailto链接

在HTML中创建mailto链接可以直接使用<a>标签，但通过JavaScript可以实现更灵活的控制，例如动态生成邮件内容、添加多个收件人或根据用户输入生成邮件。

基础mailto链接实现

<a href="mailto:example@example.com">发送邮件</a>

JavaScript动态生成mailto

// 创建基本mailto链接
const email = 'recipient@example.com';
const subject = '邮件主题';
const body = '邮件内容';

const mailtoLink = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;

添加多个收件人和抄送

const to = 'recipient1@example.com,recipient2@example.com';
const cc = 'cc@example.com';
const bcc = 'bcc@example.com';

const mailtoLink = `mailto:${to}?cc=${cc}&bcc=${bcc}`;
window.open(mailtoLink);

处理特殊字符 使用encodeURIComponent()确保主题和正文中的特殊字符正确编码：

const subject = '特殊字符测试: &, ?, =';
const encodedSubject = encodeURIComponent(subject);
// 结果: "特殊字符测试%3A%20%26%2C%20%3F%2C%20%3D"

创建可点击的mailto链接元素

function createMailtoLink(email, subject, body) {
    const link = document.createElement('a');
    link.href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    link.textContent = '点击发送邮件';
    document.body.appendChild(link);
}

注意事项

用户点击mailto链接时会触发默认邮件客户端
在移动设备上行为可能有所不同
某些浏览器可能会询问用户是否允许打开邮件客户端
大量收件人可能导致URL过长问题

高级用法：预填充表单数据

js实现mailto

document.getElementById('email-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    window.location.href = `mailto:contact@example.com?subject=来自网站的反馈&body=${encodeURIComponent(message)}%0A%0A回复地址: ${encodeURIComponent(email)}`;
});

这些方法提供了从简单到复杂的mailto实现方式，可以根据具体需求选择适合的方案。