Senden von E-Mails mit Javascript


107

Das ist etwas verwirrend zu erklären, also nimm es hier mit ...

Ich möchte ein System einrichten, in dem ein Benutzer Vorlagen-E-Mails über meine Website senden kann, es sei denn, diese werden nicht über meinen Server gesendet. Stattdessen wird lediglich der eigene lokale E-Mail-Client mit einer sofort einsatzbereiten E-Mail geöffnet. Die Anwendung füllt den Text der E-Mail mit vordefinierten Variablen aus, damit der Benutzer sie nicht selbst eingeben muss. Sie können die Nachricht dann wie gewünscht bearbeiten, falls sie nicht genau ihren Zwecken entspricht.

Es gibt eine Reihe von Gründen, warum ich möchte, dass es über den lokalen E-Mail-Client des Benutzers erfolgt. Daher ist es keine Option, den Server zum Senden der E-Mail zu bewegen: Es muss zu 100% clientseitig sein.

Ich habe bereits eine meist funktionierende Lösung, und ich werde die Details dazu als Antwort veröffentlichen. Ich frage mich, ob es einen besseren Weg gibt.


Antworten:


136

Die Art und Weise, wie ich es jetzt mache, ist im Grunde so:

Der HTML:

<textarea id="myText">
    Lorem ipsum...
</textarea>
<button onclick="sendMail(); return false">Send</button>

Das Javascript:

function sendMail() {
    var link = "mailto:me@example.com"
             + "?cc=myCCaddress@example.com"
             + "&subject=" + escape("This is my subject")
             + "&body=" + escape(document.getElementById('myText').value)
    ;

    window.location.href = link;
}

Dies funktioniert überraschenderweise ziemlich gut. Das einzige Problem ist, dass wenn der Körper besonders lang ist (irgendwo über 2000 Zeichen), er nur eine neue E-Mail öffnet, aber keine Informationen enthält. Ich vermute, dass dies damit zu tun hat, dass die maximale Länge der URL überschritten wird.


1
Dies ist ein ziemlich umständlicher Weg, wenn Sie das href-Attribut einfach auf denselben Inhalt setzen können, anstatt Javascript zu verwenden.
Ryan Doherty

1
Kein Kreisverkehr, wenn Sie den Inhalt des Textbereichs in die E-Mail aufnehmen möchten. Auch eine gute Methode, um Ihre E-Mails vor Spam-Erntemaschinen zu verbergen.
Gordon Bell

1
@ Gordon- das wird angenommen, dass der E-Mail-Harvester kein Inline-Javascript regext oder <script src = ""> folgt
alex

6
Verwenden Sie encodeURIComponent bevorzugt, um zu entkommen. Dies folgt beliebigen Regeln, die sich von der URL-Codierung unterscheiden. Obwohl Unicode-Zeichen wahrscheinlich immer noch fehlschlagen ... aber dann ist es sehr wahrscheinlich, dass das Ganze trotzdem fehlschlägt. mailto-Links mit Parametern sind sehr unzuverlässig und sollten eigentlich nicht verwendet werden.
Bobince

5
Bobince: Ja, ich dachte, es ist ein zwielichtiger Weg, aber was ist die Alternative?
Nickf

17

So geht's mit jQuery und einem "Element" zum Klicken:

$('#element').click(function(){
    $(location).attr('href', 'mailto:?subject='
                             + encodeURIComponent("This is my subject")
                             + "&body=" 
                             + encodeURIComponent("This is my body")
    );
});

Anschließend können Sie Ihre Inhalte entweder aus Eingabefeldern (z. B. mithilfe $('#input1').val()oder mithilfe eines serverseitigen Skripts mit) $.get('...')abrufen. Viel Spaß


Dies unterliegt weiterhin Einschränkungen der URL-Größe, wie vom OP erwähnt.
Suncat2000

11

Sie benötigen kein Javascript, Sie müssen lediglich Ihre href wie folgt codieren:

<a href="mailto:me@me.com">email me here!</a>

Ich hatte wohl erwartet, dass der echte Code die Adressen dynamisch ausfüllt.
Tvanfosson

@tvanfosson Wenn die E-Mail-Adressen zum Zeitpunkt des Klickens auf das Ankerelement auf der Seite bekannt sind, können Sie versuchen, dem Anker eine ID zu geben und seinen hrefWert festzulegen, wenn die Adressen ausgewählt werden. Wenn zum Zeitpunkt des Klicks ein Beitrag benötigt wird, um die E-Mail-Adressen abzurufen, funktioniert dies wahrscheinlich nicht.
Micteu

5

Wie wäre es mit einer Live-Validierung des Textfelds, und sobald diese über 2000 (oder was auch immer der maximale Schwellenwert ist) hinausgeht, wird angezeigt, dass diese E-Mail zu lang ist, um im Browser ausgefüllt zu werden <span class="launchEmailClientLink">launch what you have in your email client</span> "

Zu dem hätte ich

.launchEmailClientLink {
cursor: pointer;
color: #00F;
}

und jQuery dies in Ihre onDomReady

$('.launchEmailClientLink').bind('click',sendMail);

5

Sie können diesen kostenlosen Dienst nutzen: https://www.smtpjs.com

  1. Fügen Sie das Skript hinzu:

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

  1. Senden Sie eine E-Mail mit:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Damit
legen

Haben Sie die Schaltfläche "SMTP-Server hier einrichten" ausprobiert? Sie finden es unter dem in der Antwort angegebenen Link.
Jmojico

2

Wenn dies nur den Client des Benutzers zum Senden der E-Mail öffnet, lassen Sie ihn diese auch dort verfassen. Sie verlieren die Fähigkeit zu verfolgen, was sie senden, aber wenn dies nicht wichtig ist, sammeln Sie einfach die Adressen und den Betreff und öffnen Sie den Client, damit der Benutzer den Text ausfüllen kann.


1
Die Idee war, dass meine Anwendung den Körper für sie füllt. Ich werde die Frage bearbeiten, um das klarer zu machen ...
Nickf

1
Aber warum einen E-Mail-Client schreiben, wenn Sie nur einen öffnen, um die E-Mail zu senden?
Tvanfosson

Es ist kein E-Mail-Client, sondern nur eine Seite auf meiner Website, auf der eine E-Mail-Nachricht vorab ausgefüllt wird.
Nickf

2

Das Problem mit der Idee ist, dass der Benutzer einen E-Mail-Client haben muss, was nicht der Fall ist, wenn er sich auf Webmails verlässt, was bei vielen Benutzern der Fall ist. (Zumindest gab es keine Umkehrung, um zu dieser Webmail umzuleiten, als ich das Problem vor einem Dutzend Jahren untersuchte).

Aus diesem Grund besteht die normale Lösung darin, sich beim Senden von E-Mails auf PHP Mail () zu verlassen (also serverseitig).

Aber wenn heutzutage "E-Mail-Client" immer automatisch eingestellt wird, möglicherweise auf einen Webmail-Client, bin ich froh zu wissen.


1

Anfrage an mandrillapp.com senden :

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        console.log(xhttp.responseText);
    }
}
xhttp.open('GET', 'https://mandrillapp.com/api/1.0/messages/send.json?message[from_email]=mail@7995.by&message[to][0][email]=zdanevich.vitaly@yaa.ru&message[subject]=Заявка%20с%207995.by&message[html]=xxxxxx&key=oxddROOvCpKCp6InvVDqiGw', true);
xhttp.send();

Warum GET und nicht POST? Wenn die Nachricht groß genug ist, wird sie irgendwann abgeschnitten.
Alexey Shevelyov
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.