Как отправить письмо с JavaScript

косвенный через ваш сервер-вызов 3rd Party API-безопасный и рекомендуемый

---

ваш сервер может вызвать сторонний API после правильной аутентификации и авторизации. Ключи API не предоставляются клиенту.

узел.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 );

});

а затем использовать use $.ajax на клиенте для вызова вашего API электронной почты.

---

Непосредственно От Клиента - Вызов стороннего API-не рекомендуется

---

отправить письмо, используя только JavaScript

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

вот так -

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

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

вы можете найти, что поместить внутри функции JavaScript в этом посте.

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

обеспечить собственный PHP (или любой другой язык) скрипт для отправки электронной почты.

Я не смог найти ответ, который действительно удовлетворил первоначальный вопрос.

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

Я собрал простой бесплатный сервис, который позволяет сделать стандартный запрос HTTP POST для отправки электронной почты. Это называется PostMail, и вы можете просто разместить форму, использовать Javascript или jQuery. Когда вы регистрируетесь, он предоставляет вам код, который вы можете скопировать и вставить на свой сайт. Вот несколько примеров:

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>

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

Я сообщаю вам эту новость. Вы не можете отправить электронное письмо с помощью JavaScript как такового.

---

основываясь на контексте вопроса OP, мой ответ выше больше не соответствует действительности, как указано @KennyEvitt в комментариях. Похоже, вы можете использовать JavaScript как SMTP-клиент.

, Я не копал глубже, чтобы узнать, если это безопасно и кросс-браузер совместим достаточно. Так что, я не могу ни поощряйте и не препятствуйте вам использовать его. Используйте на свой страх и риск.

окно. открыть('mailto:[email protected]'); как указано выше ничего не скрывает "[email protected]" адрес электронной почты от сбора спам-ботов. Я постоянно сталкивался с этой проблемой.

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

в своем sendMail() функция, добавьте вызов ajax на свой бэкэнд, где вы можете реализовать это на стороне сервера.

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

обновление август 2016: EmailJS, кажется, уже живут. Вы можете отправлять до 200 писем в месяц бесплатно и она предлагает подписки на высокой громкости.

Javascript является клиентской стороной, вы не можете отправить по электронной почте с Javascript. Браузер распознает, может быть, только mailto: и запускает почтовый клиент по умолчанию.

похоже, что один "ответ" на это-реализовать клиент SMPT. Смотрите электронная почта.js для библиотеки JavaScript с SMTP-клиентом.

вот РЕПО GitHub для клиента SMTP. Основываясь на README РЕПО, кажется, что в зависимости от браузера клиента могут потребоваться различные прокладки или полифиллы, но в целом это, безусловно, кажется возможным (если не на самом деле значительно выполнено), хотя это не так легко описать даже a разумно-длинный ответ здесь.

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

1) использование api и вызов api через javascript для отправки электронной почты для нас, например https://www.emailjs.com говорит, что вы можете использовать такой код ниже, чтобы вызвать их api после некоторых настроек:

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) создать бэкэнд код для отправки электронной почты для вас, вы можете использовать любой бэкэнд база именно для вас.

3) Используя что-то вроде:

window.open('mailto:me@http://stackoverflow.com/');

который откроет ваше приложение электронной почты, это может попасть в заблокированное всплывающее окно в вашем браузере.

В общем, отправка электронной почты-это задача сервера, поэтому она должна выполняться на внутренних языках, но мы можем использовать javascript для сбора необходимых данных и отправки их на сервер или api, а также мы можем использовать приложение третьих паритетов и открывать их через браузер с помощью javascript, как уже упоминалось выше.

JavaScript не может отправлять электронную почту из веб-браузера. Однако, отступив от решения, которое вы уже пытались реализовать, вы можете сделать что-то, что соответствует исходному требованию:

отправить письмо без обновления страницы

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

Если вы не знакомы с AJAX, быстрый поиск Google даст вам много информации. Как правило, вы можете быстро запустить его с помощью jQuery $.Аякс (функция). Вам просто нужно иметь страницу на сервере, которая может быть вызвана в запросе.

есть комбинированный сервис. Вы можете объединить перечисленные выше решения, такие как mandrill с сервисом EmailJS, который может сделать систему более безопасной. Однако они еще не начали службу.

другой способ отправки электронной почты с JavaScript, это использовать directtomx.com следующим образом;

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

затем вызовите его со своей страницы следующим образом;

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

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>

Я бы сделал, что с SMTPJs библиотека.Он предлагает шифрование для ваших учетных данных, таких как имя пользователя, пароль и т. д.

короткий ответ заключается в том, что вы не можете сделать это с помощью JavaScript в одиночку. Вам понадобится серверный обработчик для подключения к SMTP-серверу, чтобы фактически отправить почту. Есть много простых почтовых скриптов в интернете, таких как этот для PHP:

использовать Ajax чтобы отправить запрос на php скрипт, проверьте, что обязательные поля не пусты или неверны с помощью js также вести запись почты, отправленной кем с вашего сервера.

function sendMail() is good for doing that.

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

$.get (URL, обратный вызов); $.post (URL, обратный вызов);

Так как все это замечательная информация, есть небольшой api под названием мандрил для отправки писем из javascript, и он отлично работает. Вы можете дать ему шанс. Вот немного учебник для начала.

отправить письмо с помощью JavaScript или jQuery

var ConvertedFileStream;
var g_recipient;
var g_subject;
var g_body;
var g_attachmentname;


function SendMailItem(p_recipient, p_subject, p_body, p_file, p_attachmentname, progressSymbol) {

    // Email address of the recipient 
    g_recipient = p_recipient;

   // Subject line of an email
    g_subject = p_subject;

   // Body description of an email
    g_body = p_body;

    // attachments of an email
    g_attachmentname = p_attachmentname;

    SendC360Email(g_recipient, g_subject, g_body, g_attachmentname);

}

function SendC360Email(g_recipient, g_subject, g_body, g_attachmentname) {
    var flag = confirm('Would you like continue with email');
    if (flag == true) {

        try {
            //p_file = g_attachmentname;
            //var FileExtension = p_file.substring(p_file.lastIndexOf(".") + 1);
           // FileExtension = FileExtension.toUpperCase();
            //alert(FileExtension);
            SendMailHere = true;

            //if (FileExtension != "PDF") {

            //    if (confirm('Convert to PDF?')) {
            //        SendMailHere = false;                    
            //    }

            //}
            if (SendMailHere) {
                var objO = new ActiveXObject('Outlook.Application');

                var objNS = objO.GetNameSpace('MAPI');

                var mItm = objO.CreateItem(0);

                if (g_recipient.length > 0) {
                    mItm.To = g_recipient;
                }

                mItm.Subject = g_subject;

                // if there is only one attachment                 
                // p_file = g_attachmentname;
                // mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);

                // If there are multiple attachment files
                //Split the  files names
                var arrFileName = g_attachmentname.split(";");
                 // alert(g_attachmentname);
                //alert(arrFileName.length);
                var mAts = mItm.Attachments;

                for (var i = 0; i < arrFileName.length; i++)
                {
                    //alert(arrFileName[i]);
                    p_file = arrFileName[i];
                    if (p_file.length > 0)
                    {                     
                        //mAts.add(p_file, 1, g_body.length + 1, g_attachmentname);
                        mAts.add(p_file, i, g_body.length + 1, p_file);

                    }
                }

                mItm.Display();

                mItm.Body = g_body;

                mItm.GetInspector.WindowState = 2;

            }
            //hideProgressDiv();

        } catch (e) {
            //debugger;
            //hideProgressDiv();
            alert('Unable to send email.  Please check the following: \n' +
                    '1. Microsoft Outlook is installed.\n' +
                    '2. In IE the SharePoint Site is trusted.\n' +
                    '3. In IE the setting for Initialize and Script ActiveX controls not marked as safe is Enabled in the Trusted zone.');
        }
    }
  }