Как отправить электронное письмо с 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, но я понимаю, что на самом деле не отправляет непосредственно с сайта.
поэтому мой вопрос в том, где я могу найти, что поместить внутри JavaScript функция для отправки электронной почты непосредственно с веб-сайта.
function sendMail() {
/* ...code here... */
}
19 ответов
вы не можете отправить электронное письмо напрямую с помощью javascript.
однако вы можете открыть почтовый клиент пользователя:
window.open('mailto:test@example.com');
есть также некоторые параметры для предварительного заполнения предмета и тела:
window.open('mailto:test@example.com?subject=subject&body=body');
другим решением было бы сделать вызов ajax на ваш сервер, чтобы сервер отправлял электронное письмо. Будьте осторожны, чтобы не позволить никому отправлять электронную почту через ваш сервер.
косвенный через ваш сервер-вызов 3rd Party API-безопасный и рекомендуемый
ваш сервер может вызвать сторонний API после надлежащей аутентификации и авторизации. Ключи API не предоставляются клиенту.
узел.js - https://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 );
});
а затем используйте use $.ajax на клиенте для вызова API электронной почты.
Непосредственно От Клиента - Вызов 3rd Party 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 виден любому, поэтому любой вредоносный пользователь может использовать ваш ключ для отправки писем, которые могут съесть вашу квоту.
вы можете найти, что поместить внутри функции 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 раскрывает эту проблему и не удобно для большинства пользователей).
- это хлопот, чтобы настроить 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>
опять же, в полном раскрытии, я создал этот службу, потому что я не мог найти подходящего ответа.
, Я не копал глубже, чтобы узнать, достаточно ли он безопасен и совместим с кросс-браузером. Так что я не могу ни поощряйте и не препятствуйте его использованию. Используйте на свой страх и риск.
окно.открыть('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 на свой бэкэнд, где вы можете реализовать это на стороне сервера.
кажется, на горизонте появилось новое решение. Это называется EmailJS. Они утверждают, что серверный код не нужен. Вы можете запросить приглашение.
обновление август 2016: EmailJS, кажется, уже живут. Вы можете отправлять до 200 писем в месяц бесплатно и она предлагает подписки на высокой громкости.
Javascript на стороне клиента, вы не можете отправить по электронной почте с Javascript. Браузер распознает, возможно, только mailto: и запускает почтовый клиент по умолчанию.
похоже, что один "ответ" на это заключается в реализации клиента SMPT. См.Эл.почта.js для библиотеки JavaScript с SMTP-клиентом.
вот РЕПО GitHub для клиента SMTP. Основываясь на README РЕПО, кажется, что в зависимости от браузера клиента могут потребоваться различные прокладки или полиполны, но в целом это, безусловно, кажется возможным (если на самом деле не значительно выполнено), то не так, как это легко описать даже разумно-длинный ответ здесь.
нет прямого ответа на ваш вопрос, поскольку мы не можем отправлять электронную почту только с помощью javascript, но есть способы использовать javascript для отправки электронной почты для нас:
1) использование api и вызов api через javascript для отправки электронной почты для нас, например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, также мы можем использовать приложение third parities и открывать их через браузер, используя javascript, как упоминалось выше.
JavaScript не может отправлять электронную почту из веб-браузера. Однако, отступив от решения, которое вы уже пытались реализовать, вы можете сделать то, что соответствует исходному требованию:
отправить письмо без обновления страницы
вы можете использовать JavaScript для создания значений, которые понадобятся электронной почте, а затем сделать запрос AJAX на серверный ресурс, который фактически отправляет электронное письмо. (Я не знаю, какие серверные языки / технологии вы используете, так что эта часть зависит от вас.)
Если вы не знакомы с AJAX, быстрый поиск Google даст вам много информации. Как правило, вы можете получить его и быстро работать с $jQuery.Аякс (функция). Вам просто нужно иметь страницу на сервере, которую можно вызвать в запросе.
существует комбинированный сервис. Вы можете объединить перечисленные выше решения, такие как 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!");
}
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>Я бы сделал, что с 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.');
}
}
}