我希望我的网站能够在不刷新页面的情况下发送电子邮件。所以我想使用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 方法的示例,但我的理解是它实际上并没有直接从站点发送。
所以我的问题是我在哪里可以找到在 JavaScript 函数中放入的内容以直接从网站发送电子邮件。
function sendMail() {
/* ...code here... */
}
您不能直接使用 javascript 发送电子邮件。
但是,您可以打开用户的邮件客户端:
window.open('mailto:test@example.com');
还有一些参数可以预先填充主题和正文:
window.open('mailto:test@example.com?subject=subject&body=body');
另一种解决方案是对您的服务器进行 ajax 调用,以便服务器发送电子邮件。注意不要让任何人通过您的服务器发送任何电子邮件。
通过您的服务器间接 - 调用 3rd Party API - 安全且推荐
您的服务器可以在经过适当的身份验证和授权后调用 3rd Party API。 API 密钥不向客户端公开。
node.js - https://www.npmjs.org/package/node-mandrill
const 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){
let _name = req.body.name;
let _email = req.body.email;
let _subject = req.body.subject;
let _messsage = req.body.message;
//implement your spam protection or checks.
sendEmail ( _name, _email, _subject, _message );
});
然后在客户端使用 $.ajax 来调用您的电子邮件 API。
直接来自客户端 - 调用第 3 方 API - 不推荐
Send an email using only JavaScript
简而言之:
注册 Mandrill 以获取 API 密钥加载 jQuery 使用 $.ajax 发送电子邮件
像这样 -
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 密钥,因此任何恶意用户都可能使用您的密钥发送电子邮件,从而占用您的配额。
我找不到真正满足原始问题的答案。
Mandrill 是不可取的,因为它有新的定价政策,而且如果你想保证你的凭证安全,它需要后端服务。
通常最好隐藏您的电子邮件,这样您就不会出现在任何列表中(mailto 解决方案暴露了这个问题,并且对大多数用户来说并不方便)。
设置 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 发送电子邮件的人。
我建议的第一种方法是在服务器上使用回调来执行此操作。如果您真的希望使用 javascript 处理它,我建议您使用以下方法。
我发现最简单的方法是使用 smtpJs。可用于发送电子邮件的免费库。
1.包含如下脚本
<script src="https://smtpjs.com/v3/smtp.js"></script>
2.您可以发送这样的电子邮件
Email.send({ Host : "smtp.yourisp.com", Username : "username", Password : "password", To : 'them@website.com', From : "you@isp.com", Subject : "这是主题", Body : "这是正文" }).then( message => alert(message) );
这是不可取的,因为它会在客户端显示您的密码。因此,您可以执行以下操作来加密您的 SMTP 凭据,并将其锁定到单个域,并传递安全令牌而不是凭据。
Email.send({ SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812", To : 'them@website.com', From : "you@isp.com", Subject : "This is the subject", Body : “这就是正文” }).then( message => alert(message) );
最后,如果您没有 SMTP 服务器,您可以使用 smtp 中继服务,例如 Elastic Email
此外,这里是官方 SmtpJS.com website 的链接,您可以在其中找到您需要的所有示例以及可以创建安全令牌的位置。
我希望有人觉得这些细节有用。快乐编码。
Uncaught ReferenceError: Email is not defined
是预期的吗?我很确定您没有定义 Email
。还是您使用了代码片段而不仅仅是代码围栏,而我们不应该运行它?另外我认为你还不算太晚。
您可以在这篇文章中找到要在 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(或任何语言)脚本来发送电子邮件。
我要告诉你这个消息。您不能使用 JavaScript 本身发送电子邮件。
根据 OP 问题的上下文,正如@KennyEvitt 在评论中指出的那样,我上面的回答不再适用。看起来您可以使用 JavaScript as an SMTP client。
但是,我还没有深入研究它是否足够安全和跨浏览器兼容。所以,我既不能鼓励也不能阻止你使用它。使用风险自负。
似乎有一个新的解决方案即将出现。它称为 EmailJS。他们声称不需要服务器代码。您可以请求邀请。
2016 年 8 月更新:EmailJS 似乎已经上线。您每月最多可以免费发送 200 封电子邮件,并且它提供更高数量的订阅。
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:
并启动您的默认邮件客户端。
JavaScript 无法从 Web 浏览器发送电子邮件。但是,从您已经尝试实施的解决方案中退后一步,您可以做一些满足原始要求的事情:
在不刷新页面的情况下发送电子邮件
您可以使用 JavaScript 构造电子邮件所需的值,然后向实际发送电子邮件的服务器资源发出 AJAX 请求。 (我不知道您使用的是什么服务器端语言/技术,所以这部分取决于您。)
如果您不熟悉 AJAX,可以通过快速的 Google 搜索为您提供大量信息。通常,您可以使用 jQuery 的 $.ajax() 函数快速启动并运行它。您只需要在服务器上有一个可以在请求中调用的页面。
似乎对此的一个“答案”是实现一个 SMPT 客户端。有关带有 SMTP 客户端的 JavaScript 库,请参阅 email.js。
Here's the GitHub repo 用于 SMTP 客户端。根据 repo 的自述文件,根据客户端浏览器的不同,似乎可能需要各种 shims 或 polyfill,但总体而言,它确实似乎是可行的(如果实际上没有显着完成),但不是以一种即使是合理的方式也很容易描述的方式 -长答案在这里。
有组合服务。您可以将上面列出的解决方案(如 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!");
}
您的问题没有直接的答案,因为我们不能仅使用 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)创建一个后端代码为您发送电子邮件,您可以使用任何后端框架为您完成。
3)使用类似的东西:
window.open('mailto:me@http://stackoverflow.com/');
这将打开您的电子邮件应用程序,这可能会在您的浏览器中进入被阻止的弹出窗口。
一般来说,发送电子邮件是服务器任务,所以应该用后端语言来完成,但是我们可以使用 javascript 收集需要的数据并将其发送到服务器或 api,也可以使用第三方应用程序并打开它们如上所述,通过使用 javascript 的浏览器。
当且仅当我必须使用 some
js 库时,我才会使用 SMTPJs 库。它为您的凭据(例如用户名、密码等)提供加密。
简短的回答是你不能单独使用 JavaScript 来做到这一点。您需要一个服务器端处理程序来连接 SMTP 服务器以实际发送邮件。网上有很多简单的邮件脚本,比如 PHP 的这个:
使用 Ajax 向 PHP 脚本发送请求,使用 js 检查必填字段是否为空或不正确,并记录从您的服务器发送的邮件。
function sendMail() is good for doing that.
检查从您的脚本发送邮件时发现的任何错误并采取适当的措施。例如,如果邮件地址不正确,或者由于服务器问题导致邮件未发送,或者在这种情况下它在队列中,请立即向用户报告并防止多次发送相同的电子邮件。使用 jQuery GET 和 POST 从脚本中获取响应
$.get(URL,回调); $.post(URL,回调);
使用 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.');
}
}
}
var objO = new ActiveXObject('Outlook.Application');
window.location.href
(如在此答案中:stackoverflow.com/questions/271171/…)打开电子邮件客户端,当用户完成电子邮件时,它不会留下那个空窗口。subject
和body
是变量还是字段中的实际文本?window.open( String( 'mailto:recipient^example.com' ).replace('^', '@') );
来混淆垃圾邮件机器人