Wysyłanie e-maili z JavaScriptem


107

To trochę mylące do wyjaśnienia, więc proszę o wyrozumiałość ...

Chcę skonfigurować system, w którym użytkownik może wysyłać wiadomości e-mail oparte na szablonach za pośrednictwem mojej witryny internetowej, z wyjątkiem tego, że w rzeczywistości nie są one wysyłane za pośrednictwem mojego serwera - zamiast tego po prostu otwiera własnego lokalnego klienta poczty z wiadomością e-mail gotową do pracy. Aplikacja wypełnia treść wiadomości e-mail wstępnie zdefiniowanymi zmiennymi, aby użytkownik nie musiał wpisywać go samodzielnie. Następnie mogą edytować wiadomość zgodnie z potrzebami, jeśli nie będzie ona dokładnie odpowiadać ich celom.

Jest wiele powodów, dla których chcę, aby przechodził przez lokalnego klienta poczty użytkownika, więc wysłanie przez serwer wiadomości e-mail nie wchodzi w grę: musi to być w 100% po stronie klienta.

Mam już uruchomione w większości działające rozwiązanie i podam szczegóły tego jako odpowiedź, zastanawiam się, czy jest lepszy sposób?


Odpowiedzi:


137

Sposób, w jaki teraz to robię, jest zasadniczo taki:

HTML:

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

Javascript:

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

To, co zaskakujące, działa dość dobrze. Jedynym problemem jest to, że jeśli treść jest szczególnie długa (ponad 2000 znaków), to po prostu otwiera nową wiadomość e-mail, ale nie ma w niej żadnych informacji. Podejrzewam, że miałoby to związek z przekroczeniem maksymalnej długości adresu URL.


1
Jest to dość okrężny sposób, gdy możesz po prostu ustawić atrybut href na tę samą zawartość, zamiast używać javascript.
Ryan Doherty,

1
Nie okrężne, jeśli chcesz zawrzeć zawartość obszaru tekstowego w wiadomości e-mail. Dobra metoda ukrywania wiadomości e-mail przed programami do zbierania spamu.
Gordon Bell

1
@ Gordon - zakłada się, że program do zbierania wiadomości e-mail nie regexuje wbudowanego javascript ani nie śledzi <script src = "">
alex

6
Użyj encodeURIComponent zamiast ucieczki, która podlega arbitralnym regułom innym niż kodowanie adresów URL. Chociaż znaki Unicode nadal mogą zawieść ... ale to i tak jest bardzo prawdopodobne. Linki mailto z parametrami są bardzo zawodne i nie powinny być używane.
bobince

5
bobince: tak, pomyślałem, że to podejrzany sposób, ale jaka jest alternatywa?
nickf

17

Oto sposób, w jaki można to zrobić za pomocą jQuery i „elementu” do kliknięcia:

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

Następnie możesz pobrać zawartość, przesyłając ją z pól wejściowych (tj. Używając $('#input1').val()lub skryptu po stronie serwera z $.get('...'). Baw się dobrze


Nadal podlega to ograniczeniom rozmiaru adresu URL, tak jak wspomniał OP.
Suncat2000

10

Nie potrzebujesz żadnego javascript, wystarczy, że Twój href będzie zakodowany w ten sposób:

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

Chyba spodziewałem się, że prawdziwy kod będzie wypełniał adresy dynamicznie.
tvanfosson

@tvanfosson Jeśli adresy e-mail są znane na stronie w momencie kliknięcia elementu kotwicy, możesz spróbować nadać kotwicy identyfikator i ustawić jego hrefwartość podczas wybierania adresów. Jeśli do uzyskania adresów e-mail w momencie kliknięcia potrzebny jest post, prawdopodobnie nie zadziała.
Micteu

5

A co z weryfikacją na żywo w polu tekstowym, a gdy przekroczy 2000 (lub niezależnie od maksymalnego progu), wyświetli się komunikat „Ten e-mail jest za długi, aby można go było wypełnić w przeglądarce <span class="launchEmailClientLink">launch what you have in your email client</span>

Do czego bym miał

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

i jQuery to do swojego onDomReady

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

5

Możesz skorzystać z tej bezpłatnej usługi: https://www.smtpjs.com

  1. Uwzględnij skrypt:

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

  1. Wyślij e-mail za pomocą:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Dzięki temu ujawniasz dane swojego serwera SMTP, najlepiej zrobić to po stronie serwera za pomocą Node lub PHP, równie dzięki
jcarlosweb

Czy próbowałeś użyć przycisku „Skonfiguruj tutaj serwer SMTP”? Możesz go znaleźć w linku udostępnionym w odpowiedzi.
jmojico

2

Jeśli to tylko otworzy klienta użytkownika do wysłania wiadomości e-mail, dlaczego nie pozwolić mu również go tam napisać. Tracisz możliwość śledzenia tego, co wysyłają, ale jeśli to nie jest ważne, po prostu zbierz adresy i temat i wyskakuj klient, aby użytkownik mógł wypełnić treść.


1
chodziło o to, że moja aplikacja wypełnia ich treść. Zmienię pytanie, aby było jaśniejsze ...
nickf

1
Ale po co pisać klienta poczty e-mail, skoro zamierzasz go tylko otworzyć, aby wysłać pocztę?
tvanfosson

to nie jest klient poczty e-mail, to tylko strona w mojej witrynie, która wstępnie wypełnia wiadomość e-mail.
nickf

2

Problem z samą ideą polega na tym, że użytkownik musi mieć klienta poczty e-mail, co nie ma miejsca, jeśli korzysta z poczty internetowej, co ma miejsce w przypadku wielu użytkowników. (przynajmniej nie było odwrotu, aby przekierować na tę pocztę internetową, kiedy badałem ten problem kilkanaście lat temu).

Dlatego normalnym rozwiązaniem jest poleganie na php mail () do wysyłania e-maili (więc po stronie serwera).

Ale jeśli w dzisiejszych czasach „klient poczty” jest zawsze ustawiany automatycznie, potencjalnie jako klient poczty internetowej, z przyjemnością się o tym dowiem.


1
> „Ale jeśli w dzisiejszych czasach„ klient poczty ”jest zawsze ustawiony, automatycznie, potencjalnie jako klient poczty internetowej, z przyjemnością się o tym dowiem. ... Jest to obsługiwane przez nowoczesne przeglądarki, np .: support.google.com/a/users/answer/9308783?hl=en
nickf

1

Wyślij zapytanie do mandrillapp.com :

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

Dlaczego GET a nie POST? jeśli wiadomość jest wystarczająco duża, w pewnym momencie zostanie obcięta.
Alexey Shevelyov
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.