Отправка писем с помощью Javascript


107

Это немного сбивает с толку, так что терпите меня ...

Я хочу настроить систему, в которой пользователь может отправлять шаблонные электронные письма через мой веб-сайт, за исключением того, что они фактически не отправляются с помощью моего сервера - вместо этого он просто открывает свой собственный локальный почтовый клиент с готовым электронным письмом. Приложение будет заполнять тело письма предопределенными переменными, чтобы пользователю не приходилось вводить его самостоятельно. Затем они могут редактировать сообщение по своему усмотрению, если оно не совсем соответствует их целям.

Есть ряд причин, по которым я хочу, чтобы это происходило через локальный почтовый клиент пользователя, поэтому заставить сервер отправлять электронную почту не вариант: он должен быть на 100% клиентским.

У меня уже есть в основном работающее решение, и я опубликую его подробности в качестве ответа, мне интересно, есть ли лучший способ?


Ответы:


137

Я делаю это сейчас примерно так:

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

Это, на удивление, работает довольно хорошо. Единственная проблема заключается в том, что если тело очень длинное (где-то более 2000 символов), оно просто открывает новое письмо, но в нем нет информации. Я подозреваю, что это связано с превышением максимальной длины URL-адреса.


1
Это довольно окольный способ сделать это, когда вы можете просто установить атрибут href для того же содержимого вместо использования javascript.
Райан Доэрти,

1
Не окольный путь, если вы хотите включить содержимое текстового поля в электронное письмо. Также хороший способ скрыть свою электронную почту от сборщиков спама.
Гордон Белл

1
@ Gordon - предполагается, что сборщик электронной почты не выполняет регулярное выражение встроенного javascript и не следует <script src = "">
Алекс

6
Используйте encodeURIComponent вместо escape, который следует произвольным правилам, отличным от кодирования URL. Хотя символы Unicode по-прежнему могут не работать ... но тогда все равно, скорее всего, выйдет из строя. Ссылки mailto с параметрами очень ненадежны и не должны использоваться.
bobince

5
bobince: да, я подумал, что это хитрый способ сделать это, но какая альтернатива?
nickf

17

Вот как это сделать с помощью jQuery и «элемента», на который нужно щелкнуть:

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

Затем вы можете получить свое содержимое, введя его из полей ввода (то есть с $('#input1').val()помощью сценария на стороне сервера или с помощью сценария $.get('...').


Это по-прежнему зависит от ограничений размера URL-адреса, как упоминалось в OP.
Suncat2000

10

Вам не нужен javascript, вам просто нужно, чтобы ваш href был закодирован следующим образом:

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

Думаю, я ожидал, что реальный код динамически заполняет адреса.
tvanfosson

@tvanfosson Если адреса электронной почты известны на странице во время щелчка по элементу привязки, вы можете попробовать присвоить привязке идентификатор и установить его hrefзначение при выборе адресов. Если для получения адресов электронной почты в момент щелчка требуется сообщение, это, вероятно, не сработает.
Micteu

5

Как насчет наличия живой проверки в текстовом поле, и как только она превысит 2000 (или любой другой максимальный порог), тогда отобразите «Это письмо слишком длинное, чтобы его можно было заполнить в браузере, пожалуйста <span class="launchEmailClientLink">launch what you have in your email client</span>»

На что я бы

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

и jQuery это в свой onDomReady

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

5

Вы можете воспользоваться этим бесплатным сервисом: https://www.smtpjs.com

  1. Включите сценарий:

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

  1. Отправьте электронное письмо, используя:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Таким образом вы открываете данные своего SMTP-сервера. Лучше всего делать это на стороне сервера с помощью Node или PHP, спасибо в равной степени
jcarlosweb

Вы пробовали кнопку «Настроить здесь SMTP-сервер»? Вы можете найти его по ссылке, предоставленной в ответе.
jmojico

2

Если это просто открывает клиенту пользователя для отправки электронного письма, почему бы не позволить им также составить его там. Вы теряете возможность отслеживать, что они отправляют, но если это не важно, просто соберите адреса и тему и откройте клиент, чтобы пользователь мог заполнить тело.


1
идея заключалась в том, чтобы мое приложение заполняло за них тело. Я отредактирую вопрос, чтобы было понятнее ...
nickf

1
Но зачем писать почтовый клиент, если вы собираетесь открыть его только для отправки почты?
tvanfosson

это не почтовый клиент, это просто страница на моем веб-сайте, которая предварительно заполняет сообщение электронной почты.
nickf

2

Проблема с самой идеей состоит в том, что у пользователя должен быть почтовый клиент, что не так, если он полагается на веб-почту, что характерно для многих пользователей. (по крайней мере, не было возможности перенаправить на эту веб-почту, когда я исследовал проблему дюжину лет назад).

Вот почему обычное решение - полагаться на php mail () для отправки электронных писем (тогда на стороне сервера).

Но если в настоящее время «почтовый клиент» всегда автоматически настраивается на веб-почтовый клиент, я буду счастлив узнать.


1
> «Но если в настоящее время« почтовый клиент »всегда автоматически настраивается на веб-почтовый клиент, я буду рад узнать». ... Это поддерживается современными браузерами, например: support.google.com/a/users/answer/9308783?hl=en
nickf

1

Отправьте запрос на 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();

Почему GET, а не POST? если сообщение достаточно большое, оно в какой-то момент будет обрезано.
Алексей
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.