it-swarm.com.de

So senden Sie eine E-Mail aus JavaScript

Ich möchte, dass meine Website die Möglichkeit hat, eine E-Mail zu senden, ohne die Seite zu aktualisieren. Also möchte ich Javascript verwenden.

<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" />

Hier ist, wie ich die Funktion aufrufen möchte, aber ich bin nicht sicher, was ich in die Javascript-Funktion einfügen soll. Nach meinen Recherchen habe ich ein Beispiel gefunden, das die mailto-Methode verwendet, aber ich verstehe, dass nicht direkt von der Site gesendet wird.

Meine Frage ist also, wo finde ich, was ich in die JavaScript-Funktion einfügen muss, um eine E-Mail direkt von der Website zu senden.

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

Sie können keine E-Mail direkt mit Javascript senden.

Sie können jedoch den E-Mail-Client des Benutzers öffnen:

window.open('mailto:[email protected]');

Es gibt auch einige Parameter, um das Thema und den Körper vorzufüllen:

window.open('mailto:[email protected]?subject=subject&body=body');

Eine andere Lösung wäre, einen Ajax-Anruf an Ihren Server zu tätigen, damit der Server die E-Mail sendet. Achten Sie darauf, dass niemand E-Mails über Ihren Server senden kann.

276
Arnaud Le Blanc

Indirekt über Ihren Server - Drittanbieter-API aufrufen - sicher und empfohlen


Ihr Server kann die Drittanbieter-API nach ordnungsgemäßer Authentifizierung und Autorisierung aufrufen. Die API-Schlüssel sind nicht für den Client verfügbar.

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 );

});

verwenden Sie anschließend $ .ajax auf dem Client, um Ihre E-Mail-API aufzurufen.


Direkt vom Client - Drittanbieter-API aufrufen - nicht empfohlen


Senden Sie eine E-Mail nur mit JavaScript

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

So was -

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

Hinweis: Denken Sie daran, dass Ihr API-Schlüssel für jeden sichtbar ist, sodass jeder böswillige Benutzer Ihren Schlüssel zum Versenden von E-Mails verwenden kann, die Ihr Kontingent verschlingen können.

87
rahulroy9202

Ich konnte keine Antwort finden, die die ursprüngliche Frage wirklich befriedigte.

  • Mandrill ist aufgrund seiner neuen Preispolitik nicht wünschenswert. Außerdem ist ein Back-End-Service erforderlich, wenn Sie Ihre Anmeldeinformationen schützen möchten.
  • Es ist oft vorzuziehen, Ihre E-Mails auszublenden, damit Sie nicht in Listen landen (die mailto-Lösung macht dieses Problem sichtbar und ist für die meisten Benutzer nicht praktisch).
  • Es ist mühsam, sendMail einzurichten oder überhaupt ein Backend zu benötigen, um eine E-Mail zu senden.

Ich habe einen einfachen kostenlosen Dienst zusammengestellt, mit dem Sie eine Standard-HTTP POST -Anforderung zum Senden einer E-Mail stellen können. Es heißt PostMail und Sie können einfach ein Formular posten, Javascript oder jQuery verwenden. Wenn Sie sich anmelden, erhalten Sie Code, den Sie kopieren und in Ihre Website einfügen können. Hier sind einige Beispiele:

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>

Ich habe diesen Dienst erneut vollständig offengelegt, da ich keine passende Antwort finden konnte.

30
user949286

In diesem Beitrag erfahren Sie, was Sie in die JavaScript-Funktion einfügen können.

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));
     }
}

Stellen Sie Ihr eigenes Skript PHP (oder eine beliebige Sprache) bereit, um die E-Mail zu senden.

25
Ry-

Ich bringe Ihnen die Nachricht. Sie können per se keine E-Mail mit JavaScript senden.


Aufgrund der Frage des OP trifft meine Antwort oben nicht mehr zu, wie von @KennyEvitt in den Kommentaren hervorgehoben. Sie können anscheinend JavaScript als SMTP-Client verwenden .

Jedoch , ich habe nicht tiefer gegraben, um herauszufinden, ob es sicher und browserübergreifend genug ist. Daher kann ich Sie weder ermutigen noch entmutigen, es zu verwenden. Benutzung auf eigene Gefahr.

18
Shef

Am Horizont scheint es eine neue Lösung zu geben. Es heißt EmailJS . Sie behaupten, dass kein Servercode benötigt wird. Sie können eine Einladung anfordern.

Update August 2016: EmailJS scheint bereits aktiv zu sein. Sie können bis zu 200 E-Mails pro Monat kostenlos versenden und es werden Abonnements für höhere Volumina angeboten.

window.open ('mailto: [email protected]'); Wie oben ist nichts dagegen einzuwenden, dass die E-Mail-Adresse "[email protected]" von Spambots geerntet wird. Ich bin ständig auf dieses Problem gestoßen.

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

Ich weiß, dass ich viel zu spät bin, um eine Antwort auf diese Frage zu schreiben, aber ich denke trotzdem, dass dies für jeden von Nutzen sein wird, der E-Mails per Javascript versenden möchte.

Der erste Weg, den ich vorschlagen würde, ist die Verwendung eines Rückrufs, um dies auf dem Server zu tun. Wenn Sie wirklich wollen, dass es mit Javascript verarbeitet wird, empfehle ich Folgendes.

Der einfachste Weg, den ich gefunden habe, war die Verwendung von smtpJs. Eine kostenlose Bibliothek, die zum Versenden von E-Mails verwendet werden kann.

1.Schließen Sie das Skript wie unten ein

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

2. Sie können entweder eine solche E-Mail senden

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)
    );

Dies ist nicht ratsam, da Ihr Kennwort auf der Clientseite angezeigt wird. Auf diese Weise können Sie die folgenden Schritte ausführen, um Ihre SMTP-Anmeldeinformationen zu verschlüsseln und sie für eine einzelne Domäne zu sperren und statt der Anmeldeinformationen ein sicheres Token zu übergeben.

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)
);

Wenn Sie keinen SMTP-Server haben, verwenden Sie einen SMTP-Relay-Dienst wie Elastic Email

Hier finden Sie auch den Link zur offiziellen SmtpJS.com-Website , auf der Sie alle benötigten Beispiele und den Ort finden, an dem Sie Ihr sicheres Token erstellen können.

Ich hoffe, dass jemand diese Details nützlich findet. Fröhliches Codieren.

4
Pissu Pusa

Javascript ist clientseitig, Sie können keine E-Mails mit Javascript senden. Der Browser erkennt möglicherweise nur mailto: und startet Ihren Standard-Mail-Client.

4
evilone

Fügen Sie in Ihrer Funktion sendMail() Ihrem Backend einen Ajax-Aufruf hinzu, den Sie serverseitig implementieren können.

4
Jeremy Huiskamp

Es gibt keine eindeutige Antwort auf Ihre Frage, da wir keine E-Mails nur mit Javascript senden können. Es gibt jedoch Möglichkeiten, mit Javascript E-Mails an uns zu senden:

1) Verwenden einer API zu und Aufrufen der API über Javascript, um die E-Mail an uns zu senden, zum Beispiel https://www.emailjs.com sagt, dass Sie einen solchen Code unten verwenden können, um ihre API aufzurufen nach einigem einstellen:

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) Erstellen Sie einen Backend-Code, um eine E-Mail für Sie zu senden. Sie können ein beliebiges Backend-Framework verwenden, um dies für Sie zu tun.

3) mit etwas wie:

window.open('mailto:[email protected]://stackoverflow.com/');

dadurch wird Ihre E-Mail-Anwendung geöffnet. Dies kann dazu führen, dass Popups in Ihrem Browser blockiert werden.

Im Allgemeinen ist das Senden einer E-Mail eine Serveraufgabe, daher sollte dies in Back-End-Sprachen erfolgen. Wir können jedoch Javascript verwenden, um die erforderlichen Daten zu sammeln und sie an den Server oder die API zu senden. Wir können auch eine Drittparitätsanwendung verwenden und diese öffnen über den Browser mit Javascript wie oben erwähnt.

3
Alireza

Es gibt einen Kombinationsservice. Sie können die oben aufgeführten Lösungen wie mandrill mit einem Service EmailJS kombinieren, um das System sicherer zu machen. Sie haben den Dienst jedoch noch nicht gestartet.

2
Santhosh Menon

Es scheint, als ob eine "Antwort" darauf darin besteht, einen SMPT-Client zu implementieren. Siehe email.js für eine JavaScript-Bibliothek mit einem SMTP-Client.

Hier ist das GitHub-Repo für den SMTP-Client. Basierend auf der README-Datei des Repos sieht es so aus, als wären je nach Client-Browser verschiedene Shims oder Polyfills erforderlich, aber insgesamt scheint es durchaus machbar (wenn auch nicht wesentlich), obwohl dies nicht auf eine Art und Weise einfach zu beschreiben ist, die selbst durch ein vernünftiges Maß an Aufwand möglich ist. lange antwort hier.

2
Kenny Evitt

Eine andere Möglichkeit, E-Mails aus JavaScript zu senden, ist die Verwendung von directtomx.com wie folgt;

 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 );
    }
};

Rufen Sie es dann von Ihrer Seite wie folgt auf;

 window.onload = function(){
    Email.apikey = "-- Your api key ---";
    Email.Send("[email protected]","[email protected]","Sent","Worked!");
 }
2
Fiach Reid

JavaScript kann keine E-Mails von einem Webbrowser senden. Wenn Sie jedoch von der Lösung zurücktreten, die Sie bereits implementiert haben, können Sie etwas tun, das die ursprüngliche Anforderung erfüllt:

senden Sie eine E-Mail, ohne die Seite zu aktualisieren

Sie können JavaScript verwenden, um die Werte zu erstellen, die für die E-Mail erforderlich sind, und dann eine AJAX -Anforderung an eine Serverressource senden, die die E-Mail tatsächlich sendet. (Ich weiß nicht, welche serverseitigen Sprachen/Technologien Sie verwenden, daher liegt dieser Teil bei Ihnen.)

Wenn Sie mit AJAX nicht vertraut sind, erhalten Sie über eine schnelle Google-Suche viele Informationen. Im Allgemeinen können Sie es mit der $ .ajax () - Funktion von jQuery schnell zum Laufen bringen. Sie müssen nur eine Seite auf dem Server haben, die in der Anfrage aufgerufen werden kann.

2
David

Ich würde das mit SMTPJs library tun. Es bietet Verschlüsselung für Ihre Anmeldeinformationen wie Benutzername, Passwort usw.

2
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>
1
Samuel Tees

Die kurze Antwort ist, dass Sie es nicht allein mit JavaScript tun können. Sie benötigen einen serverseitigen Handler, um eine Verbindung zum SMTP-Server herzustellen und die E-Mails tatsächlich zu senden. Es sind viele einfache Mail-Skripte online, wie zum Beispiel dieses für PHP:

Verwenden Sie Ajax, um eine Anforderung an das Skript PHP zu senden, und überprüfen Sie, ob das erforderliche Feld nicht leer oder falsch ist.

function sendMail() is good for doing that.

Prüfen Sie, ob beim Versenden von E-Mails aus Ihrem Skript ein Fehler aufgetreten ist, und ergreifen Sie die entsprechenden Maßnahmen.
Um das Problem zu beheben, wenn beispielsweise die E-Mail-Adresse falsch ist oder die E-Mail aufgrund eines Serverproblems nicht gesendet wurde oder sich in einem solchen Zustand in der Warteschlange befindet, melden Sie dies dem Benutzer sofort und verhindern Sie das wiederholte Senden derselben E-Mail. Erhalten Sie mit jQuery GET und POST eine Antwort von Ihrem Skript

$ .get (URL, Rückruf); $ .post (URL, Rückruf);

0
P. BANERJEE