如何从JavaScript发送电子邮件

我希望我的网站能够在不刷新页面的情况下发送电子邮件。 所以我想用Javascript。

<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post"> Enter Friend's Email: <input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" /> <input name="pmSubmit" type="submit" value="Invite" /> 

这里是我想如何调用该函数,但我不知道该怎么把JavaScript函数。 从我所做的研究中,我发现了一个使用mailto方法的例子,但是我的理解是,并不直接从网站发送。

所以我的问题是我在哪里可以find什么东西放在JavaScript函数直接从网站发送电子邮件。

 function sendMail() { /* ...code here... */ } 

您无法直接使用JavaScript发送电子邮件。

但是,您可以打开用户的邮件客户端:

 window.open('mailto:test@example.com'); 

还有一些参数可以预先填充主题和主体:

 window.open('mailto:test@example.com?subject=subject&body=body'); 

另一种解决scheme是做一个Ajax调用你的服务器,以便服务器发送电子邮件。 小心不要让任何人通过你的服务器发送任何电子邮件。

间接通过您的服务器 – 呼叫第三方API – 安全和build议


经过适当的authentication和授权,您的服务器可以调用第三方API。 API密钥不公开给客户端。

node.jshttps://www.npmjs.org/package/node-mandrill

 var mandrill = require('node-mandrill')('<your API Key>'); function sendEmail ( _name, _email, _subject, _message) { mandrill('/messages/send', { message: { to: [{email: _email , name: _name}], from_email: 'noreply@yourdomain.com', subject: _subject, text: _message } }, function(error, response){ if (error) console.log( error ); else console.log(response); }); } // define your own email api which points to your server. app.post( '/api/sendemail/', function(req, res){ var _name = req.body.name; var _email = req.body.email; var _subject = req.body.subject; var _messsage = req.body.message; //implement your spam protection or checks. sendEmail ( _name, _email, _subject, _message ); }); 

然后在客户端上使用$ .ajax来调用您的电子邮件API。


直接从客户端 – 调用第三方API – 不推荐


仅使用JavaScript发送电子邮件

 in short: 1. register for Mandrill to get an API key 2. load jQuery 3. use $.ajax to send an email 

喜欢这个 –

 function sendMail() { $.ajax({ type: 'POST', url: 'https://mandrillapp.com/api/1.0/messages/send.json', data: { 'key': 'YOUR API KEY HERE', 'message': { 'from_email': 'YOUR@EMAIL.HERE', 'to': [ { 'email': 'RECIPIENT@EMAIL.HERE', 'name': 'RECIPIENT NAME (OPTIONAL)', 'type': 'to' } ], 'autotext': 'true', 'subject': 'YOUR SUBJECT HERE!', 'html': 'YOUR EMAIL CONTENT HERE! YOU CAN USE HTML!' } } }).done(function(response) { console.log(response); // if you're into that sorta thing }); } 

https://medium.com/design-startups/b53319616782

请注意:请注意,您的API密钥对任何人都是可见的,因此任何恶意用户都可能使用您的密钥发送可能会占用您的配额的电子邮件。

你可以在这篇文章中find要放在JavaScript函数里面的东西。

 function getAjax() { try { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch (try_again) { return new ActiveXObject('Microsoft.XMLHTTP'); } } } catch (fail) { return null; } } function sendMail(to, subject) { var rq = getAjax(); if (rq) { // Success; attempt to use an Ajax request to a PHP script to send the e-mail try { rq.open('GET', 'sendmail.php?to=' + encodeURIComponent(to) + '&subject=' + encodeURIComponent(subject) + '&d=' + new Date().getTime().toString(), true); rq.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 400) { // The request failed; fall back to e-mail client window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject)); } } }; rq.send(null); } catch (fail) { // Failed to open the request; fall back to e-mail client window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject)); } } else { // Failed to create the request; fall back to e-mail client window.open('mailto:' + to + '?subject=' + encodeURIComponent(subject)); } } 

提供您自己的PHP(或任何语言)脚本来发送电子邮件。

我找不到真正满足原始问题的答案。

  • Mandrill是不可取的,因为它是新的定价策略,如果你想保持你的证书安全,它需要一个后端服务。
  • 通常最好是隐藏你的电子邮件,这样你就不会在任何列表中出现(mailto解决scheme暴露了这个问题,对大多数用户来说并不方便)。
  • 设置sendmail或者需要一个后台来发送电子邮件是一件麻烦的事情。

我把一个简单的免费服务放在一起,允许您发送一个标准的HTTP POST请求发送一封电子邮件。 这就是所谓的PostMail ,你可以简单地发表一个表单,使用Javascript或jQuery。 当你注册时,它提供了你可以复制和粘贴到你的网站的代码。 这里有些例子:

使用Javascript:

 <form id="javascript_form"> <input type="text" name="subject" placeholder="Subject" /> <textarea name="text" placeholder="Message"></textarea> <input type="submit" id="js_send" value="Send" /> </form> <script> //update this with your js_form selector var form_id_js = "javascript_form"; var data_js = { "access_token": "{your access token}" // sent after you sign up }; function js_onSuccess() { // remove this to avoid redirect window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0"; } function js_onError(error) { // remove this to avoid redirect window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1"; } var sendButton = document.getElementById("js_send"); function js_send() { sendButton.value='Sending…'; sendButton.disabled=true; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { js_onSuccess(); } else if(request.readyState == 4) { js_onError(request.response); } }; var subject = document.querySelector("#" + form_id_js + " [name='subject']").value; var message = document.querySelector("#" + form_id_js + " [name='text']").value; data_js['subject'] = subject; data_js['text'] = message; var params = toParams(data_js); request.open("POST", "https://postmail.invotes.com/send", true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send(params); return false; } sendButton.onclick = js_send; function toParams(data_js) { var form_data = []; for ( var key in data_js ) { form_data.push(encodeURIComponent(key) + "=" + encodeURIComponent(data_js[key])); } return form_data.join("&"); } var js_form = document.getElementById(form_id_js); js_form.addEventListener("submit", function (e) { e.preventDefault(); }); </script> 

jQuery的:

 <form id="jquery_form"> <input type="text" name="subject" placeholder="Subject" /> <textarea name="text" placeholder="Message" ></textarea> <input type="submit" name="send" value="Send" /> </form> <script> //update this with your $form selector var form_id = "jquery_form"; var data = { "access_token": "{your access token}" // sent after you sign up }; function onSuccess() { // remove this to avoid redirect window.location = window.location.pathname + "?message=Email+Successfully+Sent%21&isError=0"; } function onError(error) { // remove this to avoid redirect window.location = window.location.pathname + "?message=Email+could+not+be+sent.&isError=1"; } var sendButton = $("#" + form_id + " [name='send']"); function send() { sendButton.val('Sending…'); sendButton.prop('disabled',true); var subject = $("#" + form_id + " [name='subject']").val(); var message = $("#" + form_id + " [name='text']").val(); data['subject'] = subject; data['text'] = message; $.post('https://postmail.invotes.com/send', data, onSuccess ).fail(onError); return false; } sendButton.on('click', send); var $form = $("#" + form_id); $form.submit(function( event ) { event.preventDefault(); }); </script> 

再次,在完全披露,我创造这项服务,因为我找不到合适的答案。

我正在向你传达这个消息。 您无法使用JavaScript本身发送电子邮件。


基于OP的问题的上下文,我的回答不再如@KennyEvitt在评论中指出的那样。 看起来像你可以使用JavaScript作为SMTP客户端

不过 ,我还没有深入挖掘,以确定它是否安全和跨浏览器兼容。 所以,我既不鼓励也不鼓励你使用它。 使用风险自负。

window.open( '的mailto:test@example.com'); 如上所述,没有任何东西可以隐藏“test@example.com”电子邮件地址被垃圾邮件收集。 我曾经经常遇到这个问题。

 var recipient="test"; var at = String.fromCharCode(64); var dotcom="example.com"; var mail="mailto:"; window.open(mail+recipient+at+dotcom); 

sendMail()函数中,向你的后端添加一个ajax调用,你可以在服务器端实现这个调用。

Javascript是客户端,你不能用Javascript发送电子邮件。 浏览器可能只识别mailto:并启动您的默认邮件客户端。

这似乎是一个“答案”是实施一个SMPT客户端。 有关SMTP客户端的JavaScript库,请参阅email.js 。

这里是 SMTP客户端的GitHub仓库 。 根据回购的自述文件,似乎可能需要各种垫片或polyfill取决于客户端浏览器,但总体来说,它确实看起来是可行的(如果实际上没有实质性的完成),即使是合理的,这里的答案很长。

JavaScript无法从networking浏览器发送电子邮件。 然而,从已经尝试实施的解决scheme中退出,您可以做一些满足原始要求的事情:

发送电子邮件而不刷新页面

您可以使用JavaScript构build电子邮件所需的值,然后向实际发送电子邮件的服务器资源发出AJAX请求。 (我不知道你正在使用什么服务器端语言/技术,所以部分取决于你。)

如果你不熟悉AJAX,快速的Googlesearch会给你很多信息。 通常你可以用jQuery的$ .ajax()函数快速启动并运行它。 你只需要在服务器上有一个可以在请求中调用的页面。

有一个组合的服务。 您可以将上面列出的解决scheme(如mandrill)与EmailJS服务相结合,从而使系统更安全。 他们还没有开始服务。

从JavaScript发送电子邮件的另一种方式是使用directtomx.com如下:

  Email = { Send : function (to,from,subject,body,apikey) { if (apikey == undefined) { apikey = Email.apikey; } var nocache= Math.floor((Math.random() * 1000000) + 1); var strUrl = "http://directtomx.azurewebsites.net/mx.asmx/Send?"; strUrl += "apikey=" + apikey; strUrl += "&from=" + from; strUrl += "&to=" + to; strUrl += "&subject=" + encodeURIComponent(subject); strUrl += "&body=" + encodeURIComponent(body); strUrl += "&cachebuster=" + nocache; Email.addScript(strUrl); }, apikey : "", addScript : function(src){ var s = document.createElement( 'link' ); s.setAttribute( 'rel', 'stylesheet' ); s.setAttribute( 'type', 'text/xml' ); s.setAttribute( 'href', src); document.body.appendChild( s ); } }; 

然后从你的页面调用它如下:

  window.onload = function(){ Email.apikey = "-- Your api key ---"; Email.Send("to@domain.com","from@domain.com","Sent","Worked!"); } 

似乎有一个新的解决scheme在地平线上。 这就是所谓的EmailJS 。 他们声称不需要服务器代码。 您可以请求邀请。

2016年8月更新:EmailJS似乎已经生效了。 您最多可以每月发送200封电子邮件,并提供更高的订阅量。

 function send() { setTimeout(function() { window.open("mailto:" + document.getElementById('email').value + "?subject=" + document.getElementById('subject').value + "&body=" + document.getElementById('message').value); }, 320); } 
 input { text-align: center; border-top: none; border-right: none; border-left: none; height: 10vw; font-size: 2vw; width: 100vw; } textarea { text-align: center; border-top: none; border-right: none; border-left: none; border-radius: 5px; width: 100vw; height: 50vh; font-size: 2vw; } button { border: none; background-color: white; position: fixed; right: 5px; top: 5px; transition: transform .5s; } input:focus { outline: none; color: orange; border-radius: 3px; } textarea:focus { outline: none; color: orange; border-radius: 7px; } button:focus { outline: none; transform: scale(0); transform: rotate(360deg); } 
 <!DOCTYPE html> <html> <head> <title>Send Email</title> </head> <body align=center> <input id="email" type="email" placeholder="yourfreind@something.somthing"></input><br><br> <input id="subject" placeholder="Subject"></input><br> <textarea id="message" placeholder="Message"></textarea><br> <button id="send" onclick="send()"><img src=https://www.dropbox.com/s/chxcszvnrdjh1zm/send.png?dl=1 width=50px height=50px></img></button> </body> </html> 

简单的答案是,你不能单独使用JavaScript。 你需要一个服务器端的处理程序来连接SMTP服务器来实际发送邮件。 在线有许多简单的邮件脚本,比如这个用于PHP的邮件脚本:

使用Ajax向PHP脚本发送请求,检查必填字段是否为空或不正确,使用js也logging由您的服务器向谁发送的邮件。

 function sendMail() is good for doing that. 

检查从脚本发送邮件时发生的任何错误,并采取适当的措施。
例如,如果邮件地址不正确或邮件不能由于服务器问题而发送,或者在这种情况下处于队列中,则立即向用户报告,并防止多次重复发送相同的电子邮件。 从脚本获取响应使用jQuery GET和POST

$获得(URL,callback); $。员额(URL,callback);

由于这些都是很好的信息,所以有一个名叫Mandrill的 API来发送来自javascript的邮件,并且完美地工作。 你可以尝试一下。 这是一个开始的小教程 。

我会这样做SMTPJs library.It提供encryption您的凭据,如用户名,密码等

有没有一个直接的答案你的问题,因为我们不能只使用JavaScript发送电子邮件,但有很多方法可以使用JavaScript发送电子邮件给我们:

1)使用api通过javascript调用API来发送电子邮件给我们,例如https://www.emailjs.com说,你可以使用下面的代码来调用他们的API后,一些设置:;

 var service_id = 'my_mandrill'; var template_id = 'feedback'; var template_params = { name: 'John', reply_email: 'john@doe.com', message: 'This is awesome!' }; emailjs.send(service_id,template_id,template_params); 

2)创build后端代码为您发送电子邮件,您可以使用任何后端框架为您做。

3)使用像这样的东西:

 window.open('mailto:me@http://stackoverflow.com/'); 

这将打开您的电子邮件应用程序,这可能会进入浏览器阻止popup。

一般来说,发送电子邮件是服务器任务,所以应该在后端语言中完成,但是我们可以使用javascript来收集需要的数据并将其发送到服务器或api,也可以使用第三方应用程序打开它们如上所述通过使用JavaScript的浏览器。

你可以使用iframe

 <iframe src="mailto:mail@example.com"></iframe> 

使用javascript:

 var iframe = document.createElement('iframe'); iframe.src = 'mailto:mail@example.com'; iframe.style.cssText = 'display:none;'; document.body.appendChild(iframe); document.body.removeChild(iframe); 

使用JavaScript或jQuery发送电子邮件

 var ConvertedFileStream; var g_recipient; var g_subject; var g_body; var g_attachmentname; function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) { // Email address of the recipient g_recipient = p_recipient; // Subject line of an email g_subject = p_subject; // Body description of an email g_body = p_body; // attachments of an email g_attachmentname = p_attachmentname; SendC360Email(g_recipient, g_subject, g_body, g_attachmentname); } function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) { var flag = confirm('Would you like continue with email'); if (flag == true) { try { //p_file = g_attachmentname; //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1); // FileExtension = FileExtension.toUpperCase(); //alert(FileExtension); SendMailHere = true; //if (FileExtension != "PDF") { // if (confirm('Convert to PDF?')) { // SendMailHere = false; // } //} if (SendMailHere) { var objO = new ActiveXObject('Outlook.Application'); var objNS = objO.GetNameSpace('MAPI'); var mItm = objO.CreateItem(0); if (g_recipient.length > 0) { mItm.To = g_recipient; } mItm.Subject = g_subject; // if there is only one attachment // p_file = g_attachmentname; // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname); // If there are multiple attachment files //Split the files names var arrFileName = g_attachmentname.split(";"); // alert(g_attachmentname); //alert(arrFileName.length); var mAts = mItm.Attachments; for (var i = 0; i < arrFileName.length; i++) { //alert(arrFileName[i]); p_file = arrFileName[i]; if (p_file.length > 0) { //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname); mAts.add(p_file, i, g_body.length + 1, p_file); } } mItm.Display(); mItm.Body = g_body; mItm.GetInspector.WindowState = 2; } //hideProgressDiv(); } catch (e) { //debugger; //hideProgressDiv(); alert('Unable to send email. Please check the following: \n' + '1. Microsoft Outlook is installed.\n' + '2. In IE the SharePoint Site is trusted.\n' + '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.'); } } }