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

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

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

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

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

9 ответов

Решение

То, как я делаю это сейчас, в основном так:

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=" + escape("This is my subject")
             + "&body=" + escape(document.getElementById('myText').value)
    ;

    window.location.href = link;
}

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

Вот способ сделать это, используя jQuery и "элемент" для нажатия:

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

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

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

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

Вы можете использовать этот бесплатный сервис: 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");

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

На что я бы

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

и jQuery это в вашем onDomReady

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

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

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

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

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

Отправить запрос на ht tp://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();

Вы можете добавить следующее в <head>вашего HTML-файла:

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

<script type="text/javascript">
    function sendEmail() {
        Email.send({
            SecureToken: "security token of your smtp",
            To: "someone@gmail.com",
            From: "someone@gmail.com",
            Subject: "Subject...",
            Body: document.getElementById('text').value
        }).then( 
            message => alert("mail sent successfully")
        );
    }
</script>

и ниже часть HMTL:

      <textarea id="text">write text here...</textarea>
<input type="button" value="Send Email" onclick="sendEmail()">

Таким образом, функция sendEmail() получает входные данные, используя:

document.getElementById('id_of_the_element').значение

Например, вы можете добавить еще один элемент HTML, такой как тема (с id="subject"):

<textarea id="subject">write text here...</textarea>

и получить его значение в функции sendEmail():

Тема: document.getElementById('subject').value

Готово!

Примечание. Если у вас нет SMTP-сервера, вы можете создать его бесплатно здесь . А затем зашифруйте свои учетные данные SMTP здесь (атрибут SecureToken в sendEmail() соответствует сгенерированным там зашифрованным учетным данным).

Другие вопросы по тегам