logo标签列表

使用JavaScript发送电子邮件

javascriptemailclient-side
118

这有点难以解释，还请耐心看完...

我想建立一个系统，让用户可以通过我的网站发送模板邮件，但实际上并不使用我的服务器进行发送——它只会打开他们自己的本地邮件客户端，并准备好一封邮件。应用程序将填写邮件正文中的预定义变量，以免用户自己输入。用户可以根据需要编辑邮件内容，如果不完全符合他们的要求。

有很多原因使我希望通过用户的本地邮件客户端来发送邮件，所以让服务器发送邮件并不是一个选项：必须100%基于客户端。

我已经有一个基本工作的解决方案，我将把细节发布为答案，我想知道是否有更好的方法？

1
https://dev59.com/93VD5IYBdhLWcg3wWaNh - Vincent Robert
9个回答
153

我现在的做法基本上是这样的:

HTML：

<textarea id="myText">
    Lorem ipsum...
</textarea>
<button onclick="sendMail(); return false">Send</button>

JavaScript:

function sendMail() {
    var link = "mailto:me@example.com"
             + "?cc=myCCaddress@example.com"
             + "&subject=" + encodeURIComponent("This is my subject")
             + "&body=" + encodeURIComponent(document.getElementById('myText').value)
    ;
    
    window.location.href = link;
}

令人惊讶的是，这种方法效果相当不错。唯一的问题是，如果正文特别长（超过2000个字符），那么它只会打开一个新的电子邮件，但里面没有任何信息。我怀疑这可能是由于超过了URL的最大长度限制所致。

1
这是一种非常绕弯子的做法，当你可以直接将href属性设置为相同的内容而不使用JavaScript时。 - Ryan Doherty
1
如果您想在电子邮件中包含文本区域的内容，直接将其包含即可。这也是一种很好的方法，用于防止垃圾邮件收集者获取您的电子邮件地址。 - Gordon Bell
1
@Gordon- 这假定电子邮件收集器不会使用正则表达式来匹配内联JavaScript或跟随<script src="">。 - alex
7
建议使用encodeURIComponent代替escape函数进行URL编码，因为escape函数的规则与URL编码不同。尽管Unicode字符仍有可能无法成功编码，但整个过程本身很可能会失败。包含参数的mailto链接非常不可靠，不应该被使用。 - bobince
5
bobince: 是的，我知道这是一个不靠谱的方法，但还有其他选择吗？ - nickf
显示剩余5条评论
20

以下是使用jQuery和一个“元素”来完成的方法：

$('#element').click(function(){
    $(location).attr('href', 'mailto:?subject='
                             + encodeURIComponent("This is my subject")
                             + "&body=" 
                             + encodeURIComponent("This is my body")
    );
});

那么，您可以通过从输入字段中提取内容（即使用$('#input1').val()）或通过使用$.get('...')的服务器端脚本来获取您的内容。玩得开心

1
这仍然受到URL大小限制的影响，正如OP所提到的那样。 - Suncat2000
我只是想知道，当我们点击发送按钮时，会花费多长时间？ - Vikas Ukani
15

您不需要任何JavaScript，只需将您的href编码如下：

<a href="mailto:me@me.com">email me here!</a>
1
我猜我期望真正的代码会动态填充地址。 - tvanfosson
如果在单击锚元素时页面上已知电子邮件地址，则可以尝试为锚点设置ID并在选择地址时设置其href值。如果需要发布以获取单击发生时的电子邮件地址，则可能无法使用此方法。 - Micteu
在Mac上：target="_blank" 也是必需的。 - GorvGoyl
5
您可以使用这个免费的服务：https://www.smtpjs.com
  1. 引入脚本:

<script src="https://smtpjs.com/v2/smtp.js"></script>

  1. 发送邮件：
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);
4
使用此方法可以公开您SMTP服务器的数据，最好在服务器端使用Node或PHP执行此操作。谢谢。 - jcarlosweb
你尝试过“在此设置SMTP服务器”按钮吗？你可以在答案中分享的链接中找到它。 - julianm
5

文本框可以进行实时验证，一旦超过2000个字符（或任何最大阈值），则显示“该电子邮件太长，无法在浏览器中完成，请 <span class="launchEmailClientLink">使用您的电子邮件客户端</span>”。

我会这样写

.launchEmailClientLink {
cursor: pointer;
color: #00F;
}

将jQuery添加到您的onDomReady事件中
$('.launchEmailClientLink').bind('click',sendMail);
3
如果只是打开用户的客户端来发送电子邮件，为什么不让他们在那里撰写电子邮件呢？这样你就失去了追踪他们发送内容的能力，但如果这不重要，那么只需收集地址和主题，然后弹出客户端让用户填写正文即可。
2
我的想法是让我的应用程序为他们填写正文。我会编辑问题以使其更清晰... - nickf
2
但是，当你只是要打开一个邮件客户端来发送邮件时，为什么还要编写一个邮件客户端呢？ - tvanfosson
2
这不是电子邮件客户端，只是我网站上的一个页面，可以预填写电子邮件信息。 - nickf
2
这个想法的问题在于用户必须拥有邮件客户端，而许多用户依赖于网页邮箱，因此不需要邮件客户端（至少在我十几年前调查这个问题时没有转向到这个网页邮箱的解决方案）。
因此，通常的解决方案是依靠php mail()来发送电子邮件（服务器端）。
但是如果现在“邮件客户端”始终被自动设置为网页邮箱客户端，那么我会很高兴知道。
2
但是如果现在"电子邮件客户端"总是自动设置为网络邮件客户端，我会很高兴知道。这是现代浏览器支持的，例如：https://support.google.com/a/users/answer/9308783?hl=en - nickf
1
发送请求到 mandrillapp.com：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        console.log(xhttp.responseText);
    }
}
xhttp.open('GET', 'https://mandrillapp.com/api/1.0/messages/send.json?message[from_email]=mail@7995.by&message[to][0][email]=zdanevich.vitaly@yaa.ru&message[subject]=Заявка%20с%207995.by&message[html]=xxxxxx&key=oxddROOvCpKCp6InvVDqiGw', true);
xhttp.send();
为什么使用GET而不是POST？如果消息足够大，它将在某个时候被截断。 - Alexey Shevelyov
1
你可以将以下内容添加到HTML文件的<head>中：
<script src="https://smtpjs.com/v3/smtp.js"></script>

<script type="text/javascript">
    function sendEmail() {
        Email.send({
            SecureToken: "security token of your smtp",
            To: "someone@gmail.com",
            From: "someone@gmail.com",
            Subject: "Subject...",
            Body: document.getElementById('text').value
        }).then( 
            message => alert("mail sent successfully")
        );
    }
</script>

以下是HTML部分：
<textarea id="text">write text here...</textarea>
<input type="button" value="Send Email" onclick="sendEmail()">

因此，sendEmail()函数使用以下方式获取输入：

document.getElementById('id_of_the_element').value

例如，您可以添加另一个HTML元素，如主题（带有id="subject"）：

<textarea id="subject">在此处编写文本...</textarea>

并在sendEmail()函数中获取其值：

主题：document.getElementById('subject').value

然后就完成了！

注意：如果您没有SMTP服务器，可以在这里免费创建一个。然后加密您的SMTP凭据这里（sendEmail()中的SecureToken属性对应于生成的加密凭据）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接