使用Javascript发送电子邮件


107

这有点令人困惑,所以请在这里忍受...

我想建立一个系统,使用户可以通过我的网站发送模板化的电子邮件,但实际上并没有使用我的服务器发送-而是打开自己的本地邮件客户端并准备发送电子邮件。该应用程序将使用预定义的变量填充电子邮件的正文,以节省用户必须自己键入的电子邮件。然后,如果该消息不完全符合他们的目的,他们可以根据需要编辑该消息。

有很多原因让我希望它通过用户的本地邮件客户端,因此让服务器发送电子邮件不是一种选择:它必须是100%的客户端。

我已经有一个运行良好的解决方案,我将发布其详细信息作为答案,我想知道是否有更好的方法?


Answers:


137

我现在的操作方式基本上是这样的:

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时,这是一种非常round回的方法。
瑞安·多尔蒂

1
如果要在电子邮件中包含文本区域的内容,请不要绕行。也是一种从垃圾邮件收集器隐藏电子邮件的好方法。
戈登·贝尔

1
@ Gordon-假定电子邮件收割机未对内联javascript进行正则表达式或遵循<script src =“”>
alex

6
优先使用encodeURIComponent进行转义,该转义遵循与URL编码不同的任意规则。尽管Unicode字符仍然可能会失败...但是,无论如何,整个事情很可能会失败。具有参数的mailto链接是超级不可靠的,因此不应真正使用。
bobince

5
bobince:是的,我认为这是一种狡猾的方式,但是还有什么选择呢?
尼克

17

这是使用jQuery和单击“元素”的方法:

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

然后,您可以通过从输入字段中获取内容来获取内容(例如,使用$('#input1').val()或通过服务器端脚本使用$.get('...')。)


正如OP所提到的,这仍然受URL大小限制。
Suncat2000 '19

10

您不需要任何JavaScript,只需要将href编码如下:

<a href="mailto:me@me.com">email me here!</a>

我猜我期望真正的代码动态填充地址。
tvanfosson

@tvanfosson如果单击锚元素时页面上的电子邮件地址是已知的,则可以尝试为锚指定ID,并href在选择地址时设置其值。如果在单击发生时需要一个帖子来获取电子邮件地址,则可能不起作用。
Micteu

5

如何在文本框上进行实时验证,一旦验证超过2000(或最高阈值),然后显示“此电子邮件太长,无法在浏览器中完成,请<span class="launchEmailClientLink">launch what you have in your email client</span>

我要去的地方

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

和jQuery这到您的onDomReady

$('.launchEmailClientLink').bind('click',sendMail);

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"
);

2
通过此操作,您可以公开SMTP服务器的数据,最好在服务器端使用Node或PHP进行处理,同样要感谢
jcarlosweb

您是否尝试过“在此处设置SMTP服务器”按钮?您可以在答案共享的链接中找到它。
jmojico

2

如果这只是为了打开用户的客户端来发送电子邮件,为什么不让他们也在那里编写电子邮件。您将失去跟踪其发送内容的能力,但是如果这并不重要,则只需收集地址和主题并弹出客户端以让用户填写正文即可。


1
这个想法是我的应用程序可以满足他们的需求。我将编辑问题以使其更加清楚……
尼克

1
但是,当您要打开一个电子邮件客户端以发送邮件时,为什么还要编写电子邮件客户端呢?
tvanfosson

它不是电子邮件客户端,而是我网站上预填充电子邮件消息的页面。
尼克

2

这个想法的问题在于用户必须具有电子邮件客户端,而如果他依赖网络邮件则不是这种情况,许多用户就是这种情况。(至少十年前,当我调查此问题时,至少没有转向该Webmail的方法)。

这就是为什么正常的解决方案是依靠php mail()发送电子邮件(然后是服务器端)的原因。

但是,如果如今总是自动将“电子邮件客户端”设置为webmail客户端,我将很高兴知道。


>“但是,如果现在总是自动将“电子邮件客户端”设置为webmail客户端,我将很高兴知道。...这受现代浏览器的支持,例如:support.google.com/a/users/answer/9308783?
hl=zh

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();

为什么要获取而不是POST?如果消息足够大,它将在某个时候被截断。
阿列克谢·谢维利诺夫
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.