Comment envoyer un email à partir de JavaScript
Je souhaite que mon site Web puisse envoyer un courrier électronique sans actualiser la page. Donc, je veux utiliser 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" />
Voici comment je veux appeler la fonction, mais je ne sais pas quoi mettre dans la fonction javascript. D'après les recherches que j'ai effectuées, j'ai trouvé un exemple qui utilise la méthode mailto, mais d'après ce que j'ai compris, les envois ne sont pas effectués directement à partir du site.
Ma question est donc de savoir où puis-je trouver quoi mettre dans la fonction JavaScript pour envoyer un email directement à partir du site Web.
function sendMail() {
/* ...code here... */
}
Vous ne pouvez pas envoyer un email directement avec javascript.
Vous pouvez cependant ouvrir le client de messagerie de l'utilisateur:
window.open('mailto:[email protected]');
Il existe également quelques paramètres pour pré-remplir le sujet et le corps:
window.open('mailto:[email protected]?subject=subject&body=body');
Une autre solution serait de faire un appel ajax sur votre serveur, afin que le serveur envoie le courrier électronique. Veillez à ne permettre à personne d'envoyer des courriels via votre serveur.
Indirect via votre serveur - Appel d'une API tierce - sécurisé et recommandé
Votre serveur peut appeler l’API tierce après une authentification et une autorisation appropriées. Les clés API ne sont pas exposées au client.
node.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: '[email protected]',
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 );
});
utilisez ensuite $ .ajax sur client pour appeler votre API de messagerie.
directement du client - API tierce appelante - non recommandé
Envoyer un email en utilisant uniquement JavaScript
in short:
1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email
Comme ça -
function sendMail() {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': 'YOUR API KEY HERE',
'message': {
'from_email': '[email protected]',
'to': [
{
'email': '[email protected]',
'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
Remarque: N'oubliez pas que votre clé API est visible par quiconque. Par conséquent, tout utilisateur malveillant peut utiliser votre clé pour envoyer des courriels susceptibles de surcharger votre quota.
Je n'ai pas pu trouver de réponse qui satisfasse réellement à la question initiale.
- Mandrill n’est pas souhaitable en raison de sa nouvelle politique de prix. De plus, il nécessitait un service d’arrière-plan si vous vouliez protéger vos informations d’identité.
- Il est souvent préférable de cacher votre courrier électronique pour ne pas vous retrouver sur une liste (la solution mailto expose ce problème et ne convient pas à la plupart des utilisateurs).
- Il est fastidieux de configurer sendMail ou de demander un backend pour envoyer un courrier électronique.
J'ai mis en place un simple service gratuit qui vous permet de faire une demande HTTP POST standard pour envoyer un email. Cela s'appelle PostMail , et vous pouvez simplement poster un formulaire, utilisez Javascript ou jQuery. Lorsque vous vous inscrivez, il vous fournit un code que vous pouvez copier et coller sur votre site web. Voici quelques exemples:
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>
Encore une fois, en toute transparence, j'ai créé ce service car je ne trouvais pas de réponse adéquate.
Vous pouvez trouver ce qu'il faut mettre dans la fonction JavaScript dans ce post.
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));
}
}
Fournissez votre propre script PHP (ou quelle que soit la langue) pour envoyer le courrier électronique.
Je vous annonce la nouvelle. Vous NE POUVEZ PAS envoyer un email avec JavaScript en soi.
Sur la base du contexte de la question du PO, ma réponse ci-dessus n'est plus vraie, comme l'a souligné @KennyEvitt dans les commentaires. On dirait que vous pouvez utiliser ) en tant que client SMTP .
Cependant , je n'ai pas approfondi pour savoir s'il est suffisamment sécurisé et compatible avec tous les navigateurs. Donc, je ne peux ni vous encourager ni vous décourager à l'utiliser. À utiliser à vos risques et périls.
Il semble y avoir une nouvelle solution à l'horizon. Cela s'appelle EmailJS . Ils prétendent qu'aucun code serveur n'est nécessaire. Vous pouvez demander une invitation.
Mise à jour août 2016: EmailJS semble déjà être en direct. Vous pouvez envoyer gratuitement jusqu'à 200 e-mails par mois et offre des abonnements pour des volumes plus importants.
window.open ('mailto: [email protected]'); comme ci-dessus ne cache rien pour que l'adresse e-mail "[email protected]" soit récoltée par des spambots. Je rencontrais constamment ce problème.
var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);
Je sais que je suis bien trop tard pour écrire une réponse à cette question, mais je pense néanmoins que cela sera utile à quiconque envisage d'envoyer des courriers électroniques via javascript.
La première façon que je suggérerais est d'utiliser un rappel pour le faire sur le serveur. Si vous voulez vraiment que cela soit géré en utilisant javascript, voici ce que je recommande.
Le moyen le plus simple que j'ai trouvé consistait à utiliser smtpJs. Une bibliothèque gratuite qui peut être utilisée pour envoyer des emails.
1. Incluez le script comme ci-dessous
<script src="https://smtpjs.com/v3/smtp.js"></script>
2. Vous pouvez soit envoyer un email comme celui-ci
Email.send({
Host : "smtp.yourisp.com",
Username : "username",
Password : "password",
To : '[email protected]',
From : "[email protected]",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);Ce qui n'est pas conseillé car il affichera votre mot de passe côté client. Vous pouvez alors procéder comme suit pour chiffrer vos informations d'identification SMTP, le verrouiller sur un seul domaine et transmettre un jeton sécurisé à la place des informations d'identification.
Email.send({
SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
To : '[email protected]',
From : "[email protected]",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);Enfin, si vous n’avez pas de serveur SMTP, vous utilisez un service de relais SMTP tel que Elastic Email
Vous trouverez également ici le lien vers le site officiel site Web SmtpJS.com où vous pouvez trouver tous les exemples dont vous avez besoin et le lieu où vous pourrez créer votre jeton sécurisé.
J'espère que quelqu'un trouvera ces détails utiles. Bonne codage.
Javascript est côté client, vous ne pouvez pas envoyer d'e-mail avec Javascript. Le navigateur reconnaît peut-être uniquement mailto: et démarre votre client de messagerie par défaut.
Dans votre fonction sendMail(), ajoutez un appel ajax à votre backend, où vous pourrez l'implémenter côté serveur.
Il n’existe pas de réponse directe à votre question, car nous ne pouvons pas envoyer d’e-mails uniquement à l'aide de javascript, mais il existe des moyens d'utiliser javascript pour envoyer des emails à notre intention:
1) en utilisant une API pour appeler l'API via JavaScript pour envoyer le courrier électronique pour nous, par exemple https://www.emailjs.com vous pouvez utiliser un tel code ci-dessous pour appeler leur API après quelques réglages:
var service_id = 'my_mandrill';
var template_id = 'feedback';
var template_params = {
name: 'John',
reply_email: '[email protected]',
message: 'This is awesome!'
};
emailjs.send(service_id,template_id,template_params);
2) créer un code backend pour envoyer un email pour vous, vous pouvez utiliser n'importe quel framework backend pour le faire pour vous.
3) en utilisant quelque chose comme:
window.open('mailto:me@http://stackoverflow.com/');
qui ouvrira votre application de messagerie, cela pourrait entrer dans le popup bloqué dans votre navigateur.
En général, envoyer un email est une tâche de serveur, donc devrait être fait dans les langages backend, mais nous pouvons utiliser javascript pour collecter les données nécessaires et les envoyer au serveur ou à l'API, nous pouvons également utiliser une troisième application de parités et les ouvrir via le navigateur en utilisant javascript comme mentionné ci-dessus.
Il existe un service de combinaison. Vous pouvez combiner les solutions énumérées ci-dessus, telles que mandrill, avec un service EmailJS, qui peut rendre le système plus sécurisé. Cependant, ils n'ont pas encore démarré le service.
Il semble qu'une solution à ce problème consiste à implémenter un client SMPT. Voir email.js pour une bibliothèque JavaScript avec un client SMTP.
Voici le repo GitHub pour le client SMTP. Selon le fichier README du référentiel, il semble que différentes cales ou polyfill peuvent être nécessaires en fonction du navigateur client, mais dans l’ensemble, cela semble certainement réalisable (s’il n’est pas réellement accompli), sans pour autant être facilement décrit, même raisonnablement. longue réponse ici.
Une autre façon d’envoyer un courrier électronique à partir de JavaScript consiste à utiliser directtomx.com comme suit;
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 );
}
};
Puis appelez-le depuis votre page comme suit:
window.onload = function(){
Email.apikey = "-- Your api key ---";
Email.Send("[email protected]","[email protected]","Sent","Worked!");
}
JavaScript ne peut pas envoyer de courrier électronique à partir d'un navigateur Web. Toutefois, en vous éloignant de la solution que vous avez déjà essayé de mettre en œuvre, vous pouvez faire quelque chose qui répond à l'exigence initiale:
envoyer un email sans actualiser la page
Vous pouvez utiliser JavaScript pour construire les valeurs nécessaires au courrier électronique, puis envoyer une demande AJAX à une ressource serveur qui envoie effectivement le courrier électronique. (Je ne sais pas quels langages/technologies côté serveur vous utilisez, alors cette partie vous revient.)
Si vous ne connaissez pas AJAX, une recherche rapide dans Google vous fournira de nombreuses informations. En général, vous pouvez le faire fonctionner rapidement avec la fonction $ .ajax () de jQuery. Vous devez juste avoir une page sur le serveur qui peut être appelée dans la demande.
Je ferais cela avec SMTPJs library.It offre un cryptage à vos informations d'identification telles que nom d'utilisateur, mot de passe, etc.
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="[email protected]"></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>La réponse courte est que vous ne pouvez pas le faire en utilisant JavaScript seul. Vous aurez besoin d'un gestionnaire côté serveur pour vous connecter au serveur SMTP afin d'envoyer le courrier. Il existe de nombreux scripts de messagerie simples en ligne, tels que celui-ci pour PHP:
Utilisez Ajax pour envoyer une requête au script PHP, vérifiez que les champs obligatoires ne sont pas vides ou incorrects. Js conserve également un enregistrement du courrier envoyé par qui de votre serveur.
function sendMail() is good for doing that.
Recherchez toute erreur détectée lors de l'envoi de votre script et prenez les mesures appropriées.
Pour le résoudre, par exemple, si l'adresse mail est incorrecte ou si le courrier n'est pas envoyé en raison d'un problème de serveur ou s'il est dans cette file d'attente, signalez-le immédiatement à l'utilisateur et empêchez l'envoi multiple du même message encore et encore. Obtenez une réponse de votre script Utilisation de jQuery GET et POST
$ .get (URL, rappel); $ .post (URL, rappel);