Comment envoyer un e-mail à partir de JavaScript

Je souhaite que mon site Web puisse envoyer un e-mail sans actualiser la page. Je veux donc 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 faites, j'ai trouvé un exemple qui utilise la méthode mailto, mais d'après ce que je comprends, il n'est pas envoyé directement depuis le site.

Ma question est donc de savoir où trouver ce qu'il faut mettre dans la fonction JavaScript pour envoyer un e-mail directement depuis le site Web.

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

Vous ne pouvez pas envoyer un e-mail directement avec javascript.

Vous pouvez cependant ouvrir le client de messagerie de l'utilisateur:

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

Il y a aussi quelques paramètres pour pré-remplir le sujet et le corps:

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

Une autre solution serait de faire un appel ajax à votre serveur, afin que le serveur envoie l'e-mail. Veillez à ne permettre à personne d'envoyer des e-mails via votre serveur.

Indirect via votre serveur - Appel à 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: '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 );

});

puis utilisez $ .ajax sur le client pour appeler votre API de messagerie.

Directement à partir du client - appelant une API tierce - non recommandé

Envoyer un e-mail 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': '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

Remarque: Gardez à l'esprit que votre clé API est visible par n'importe qui, donc tout utilisateur malveillant peut utiliser votre clé pour envoyer des e-mails qui peuvent consommer votre quota.

Je n'ai pas pu trouver de réponse qui satisfasse vraiment la question d'origine.

• Mandrill n'est pas souhaitable en raison de sa nouvelle politique de prix, et il nécessitait un service backend si vous vouliez garder vos informations d'identification en sécurité.
• Il est souvent préférable de masquer votre e-mail afin de ne vous retrouver dans aucune liste (la solution mailto expose ce problème et n'est pas pratique pour la plupart des utilisateurs).
• C'est compliqué de configurer sendMail ou d'avoir besoin d'un backend pour envoyer un e-mail.

J'ai mis en place un service gratuit simple qui vous permet de faire une demande HTTP POST standard pour envoyer un e-mail. Cela s'appelle PostMail , et vous pouvez simplement poster un formulaire, utiliser Javascript ou jQuery. Lorsque vous vous inscrivez, il vous fournit un code que vous pouvez copier et coller dans 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 divulgation, j'ai créé ce service parce que je n'ai pas pu trouver de réponse appropriée.

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 n'importe quel langage) pour envoyer l'e-mail.

Je vous annonce la nouvelle. Vous NE POUVEZ PAS envoyer un e-mail avec JavaScript en soi.

Sur la base du contexte de la question du PO, ma réponse ci-dessus ne se vérifie plus, comme l'a souligné @KennyEvitt dans les commentaires. Il semble que vous puissiez utiliser JavaScript comme client SMTP .

Cependant , je n'ai pas creusé plus profondément pour savoir s'il est suffisamment sécurisé et compatible avec plusieurs navigateurs. Je ne peux donc ni vous encourager ni vous décourager à l'utiliser. À utiliser à vos risques et périls.

Je sais que je suis trop tard pour écrire une réponse à cette question, mais je pense néanmoins que cela sera utile à toute personne qui envisage d'envoyer des e-mails 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 qu'il soit géré en utilisant le suivi javascript, c'est ce que je recommande.

Le moyen le plus simple que j'ai trouvé était d'utiliser smtpJs. Une bibliothèque gratuite qui peut être utilisée pour envoyer des e-mails.

1.Incluez le script comme ci-dessous

<script src="https://smtpjs.com/v3/smtp.js"></script>

2. Vous pouvez envoyer un e-mail comme celui-ci

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    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 du côté client.Vous pouvez donc effectuer les opérations suivantes pour crypter vos informations d'identification SMTP, les 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 : 'them@website.com',
    From : "you@isp.com",
    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

Voici également le lien vers le site officiel de SmtpJS.com où vous pouvez trouver tous les exemples dont vous avez besoin et l'endroit où vous pouvez créer votre jeton sécurisé.

J'espère que quelqu'un trouvera ces détails utiles. Codage heureux.

Il semble y avoir une nouvelle solution à l'horizon. Cela s'appelle EmailJS . Ils affirment qu'aucun code serveur n'est nécessaire. Vous pouvez demander une invitation.

Mise à jour d'août 2016: EmailJS semble déjà être en ligne. Vous pouvez envoyer jusqu'à 200 e-mails par mois gratuitement et il propose des abonnements pour des volumes plus élevés.

window.open ('mailto: test@example.com'); comme ci-dessus ne fait rien pour cacher que l'adresse e-mail "test@example.com" ne soit pas récupérée par les spambots. J'avais l'habitude de constamment rencontrer ce problème.

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

Javascript est côté client, vous ne pouvez pas envoyer de courrier électronique avec Javascript. Le navigateur reconnaît peut-être seulement mailto:et démarre votre client de messagerie par défaut.

Dans votre sendMail()fonction, ajoutez un appel ajax à votre backend, où vous pouvez l'implémenter côté serveur.

JavaScript ne peut pas envoyer de courrier électronique à partir d'un navigateur Web. Cependant, en prenant du recul par rapport à la solution que vous avez déjà essayé de mettre en œuvre, vous pouvez faire quelque chose qui répond à l'exigence d'origine:

envoyer un email sans rafraîchir la page

Vous pouvez utiliser JavaScript pour construire les valeurs dont l'e-mail aura besoin, puis faire une demande AJAX à une ressource serveur qui envoie réellement l'e-mail. (Je ne sais pas quelles langues / technologies côté serveur vous utilisez, donc cette partie dépend de vous.)

Si vous n'êtes pas familier avec AJAX, une recherche rapide sur Google vous donnera beaucoup d'informations. En général, vous pouvez le faire fonctionner rapidement avec la fonction $ .ajax () de jQuery. Il vous suffit d'avoir une page sur le serveur qui peut être appelée dans la demande.

Il semble qu'une «réponse» à cela soit d'implémenter un client SMPT. Voir email.js pour une bibliothèque JavaScript avec un client SMTP.

Voici le dépôt GitHub pour le client SMTP. Sur la base du fichier README du référentiel, il semble que diverses cales ou polyfills peuvent être nécessaires en fonction du navigateur client, mais dans l'ensemble, cela semble certainement faisable (s'il n'est pas réellement accompli de manière significative), mais pas d'une manière qui peut être facilement décrite par même un raisonnablement- longue réponse ici.

Il existe un service combiné. Vous pouvez combiner les solutions énumérées ci-dessus comme mandrill avec un service EmailJS, ce qui peut rendre le système plus sécurisé. Cependant, ils n'ont pas encore commencé le service.

Une autre façon d'envoyer des e-mails à 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 );
    }
};

Appelez-le ensuite depuis votre page comme suit;

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

Je le ferais avec la bibliothèque SMTPJ.Il offre un cryptage à vos informations d'identification telles que nom d'utilisateur, mot de passe, etc.

Il n'y a pas de réponse directe à votre question car nous ne pouvons pas envoyer d'e-mails uniquement en utilisant javascript, mais il existe des moyens d'utiliser javascript pour envoyer des e-mails pour nous:

1) en utilisant une API pour appeler l'API via javascript pour envoyer l'e-mail pour nous, par exemple https://www.emailjs.com dit que vous pouvez utiliser un tel code ci-dessous pour appeler leur API après un certain réglage:

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) créez un code backend pour vous envoyer un e-mail, 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 une fenêtre contextuelle bloquée dans votre navigateur.

En général, l'envoi d'un e-mail est une tâche de serveur, cela devrait donc être fait dans les langues du 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 application de troisième parité et les ouvrir via le navigateur en utilisant javascript comme mentionné ci-dessus.

La réponse courte est que vous ne pouvez pas le faire en utilisant uniquement JavaScript. Vous auriez besoin d'un gestionnaire côté serveur pour vous connecter au serveur SMTP afin d'envoyer réellement le courrier. Il existe de nombreux scripts de messagerie simples en ligne, comme 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 en utilisant js conservez également un enregistrement des e-mails envoyés par qui depuis 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 e-mail est incorrecte ou si le courrier n'est pas envoyé en raison d'un problème de serveur ou s'il est dans la file d'attente dans une telle condition, signalez-le immédiatement à l'utilisateur et empêchez l'envoi multiple du même e-mail encore et encore. Obtenez la réponse de votre script à l'aide de jQuery GET et POST

$ .get (URL, rappel); $ .post (URL, rappel);

Étant donné que toutes ces informations sont merveilleuses, il existe une petite API appelée Mandrill pour envoyer des e-mails à partir de javascript et cela fonctionne parfaitement. Vous pouvez lui donner un coup de feu. Voici un petit tutoriel pour commencer.

Envoyer un e-mail en utilisant JavaScript ou 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.');
        }
    }
  }