Як надіслати електронний лист від JavaScript

Я хочу, щоб мій веб-сайт мав можливість надсилати електронний лист, не оновлюючи сторінку. Тому я хочу використовувати Javascript.

<form action="javascript:sendMail();" name="pmForm" id="pmForm" method="post">
Enter Friend's Email:
<input name="pmSubject" id="pmSubject" type="text" maxlength="64" style="width:98%;" />
<input name="pmSubmit" type="submit" value="Invite" />

Ось як я хочу викликати функцію, але я не впевнений, що ввести у функцію javascript. З проведених нами досліджень я знайшов приклад, який використовує метод mailto, але я розумію, що насправді не надсилається безпосередньо з сайту.

Тому моє запитання - де я можу знайти те, що можна помістити у функцію JavaScript, щоб надіслати електронний лист безпосередньо з веб-сайту.

function sendMail() {
    /* ...code here...    */
}

Ви не можете надсилати електронний лист безпосередньо за допомогою JavaScript.

Однак ви можете відкрити поштовий клієнт користувача:

window.open('mailto:test@example.com');

Існують також деякі параметри для попереднього заповнення теми та тіла:

window.open('mailto:test@example.com?subject=subject&body=body');

Іншим рішенням буде зробити дзвінок ajax на ваш сервер, щоб сервер надсилав електронне повідомлення. Будьте обережні, щоб не дозволяти кому-небудь надсилати будь-який лист через ваш сервер.

Непряме через ваш сервер - виклик стороннього API - безпечний і рекомендований

Ваш сервер може зателефонувати до стороннього API після належної аутентифікації та авторизації. Ключі API не піддаються клієнту.

node.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: 'noreply@yourdomain.com',
            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 );

});

а потім використовуйте $ .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': 'YOUR@EMAIL.HERE',
          'to': [
              {
                'email': 'RECIPIENT@EMAIL.HERE',
                '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 видно всім, тому будь-який зловмисний користувач може використовувати ваш ключ, щоб надсилати електронні листи, які можуть знищити вашу квоту.

Я не зміг знайти відповідь, яка справді задовольнила б оригінальне запитання.

• Mandrill не бажаний через нову політику ціноутворення, плюс для цього потрібна послуга резервного копіювання, якщо ви хочете зберегти свої дані.
• Часто бажано приховувати свою електронну пошту, щоб ви не опинилися в жодному списку (рішення поштового зв’язку розкриває цю проблему і не зручно для більшості користувачів).
• Налаштувати 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.

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 (чи будь-якою мовою) скрипт для надсилання електронної пошти.

Я повідомляю вам новину. Ви не можете надсилати електронний лист із JavaScript як такої.

Виходячи з контексту питання ОП, моя відповідь вище вже не відповідає дійсності, як вказував @KennyEvitt у коментарях. Схоже, ви можете використовувати JavaScript як клієнт SMTP .

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

Я знаю, що я занадто пізно, щоб написати відповідь на це питання, але все-таки я думаю, що це буде корисно для тих, хто думає надсилати електронні листи через javascript.

Перший спосіб, який я б запропонував, - це використання зворотного дзвінка, щоб зробити це на сервері. Якщо ви дійсно хочете, щоб це оброблялося за допомогою перегляду javascript - це те, що я рекомендую.

Найпростіший спосіб, який я знайшов - це використання smtpJs. Безкоштовна бібліотека, яку можна використовувати для надсилання електронних листів.

1.Включіть сценарій, як показано нижче

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

2. Ви можете надіслати електронний лист, як це

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
    }).then(
      message => alert(message)
    );

Що не бажано, оскільки він відображатиме ваш пароль на стороні клієнта. Отже, ви можете зробити наступне, зашифрувавши ваші облікові записи SMTP, і заблокувати його в одному домені, а натомість передавати захищений маркер замість облікових даних.

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

Нарешті, якщо у вас немає сервера SMTP, ви використовуєте службу ретрансляції smtp, наприклад Elastic Email

Також тут знаходиться посилання на офіційний веб-сайт SmtpJS.com, де ви можете знайти весь необхідний вам приклад та місце, де ви можете створити захищений маркер.

Сподіваюсь, хтось знайде ці деталі корисними. Щасливе кодування.

Здається, на горизонті є нове рішення. Це називається EmailJS . Вони стверджують, що не потрібен код сервера. Ви можете надіслати запит на запрошення.

Оновлення серпня 2016 року. Здається, EmailJS вже доступний. Ви можете відправляти до 200 електронних листів на місяць безкоштовно, і він пропонує передплату на більші обсяги.

window.open ('mailto: test@example.com'); як зазначено вище, нічого не приховує адресу електронної пошти "test@example.com" від отримання спам-ботів. Раніше я постійно стикався з цією проблемою.

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

Javascript - це клієнт, ви не можете надіслати електронною поштою Javascript. Браузер розпізнає, можливо, лише mailto:і запускає ваш поштовий клієнт за замовчуванням.

У своїй sendMail()функції додайте виклик ajax у свій бекенд, де ви можете реалізувати це на стороні сервера.

JavaScript не може надсилати електронну пошту з веб-браузера. Однак, відступивши від рішення, яке ви вже намагалися реалізувати, ви можете зробити щось, що відповідає початковій вимозі:

надіслати електронний лист, не оновлюючи сторінку

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

Якщо ви не знайомі з AJAX, швидкий пошук в Google дасть вам багато інформації. Як правило, ви можете швидко і швидко працювати за допомогою функції $ .ajax () jQuery. Вам просто потрібно мати сторінку на сервері, яку можна викликати у запиті.

Схоже, одна «відповідь» на це полягає у впровадженні SMPT-клієнта. Дивіться email.js щодо бібліотеки JavaScript із клієнтом SMTP.

Ось репортаж GitHub для клієнта SMTP. Виходячи з README репо, видно, що залежно від веб-переглядача клієнта можуть знадобитися різні прокладки або поліфіли, але в цілому це, безумовно, здається здійсненним (якщо це фактично не досягнуто значною мірою). довга відповідь тут.

Є комбінований сервіс. Ви можете поєднати перераховані вище рішення, такі як мандриль, із сервісом 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("to@domain.com","from@domain.com","Sent","Worked!");
 }

Я б зробив це з бібліотекою SMTPJs. Він пропонує шифрування ваших облікових даних, таких як ім'я користувача, пароль і т.д.

Немає прямої відповіді на ваше запитання, оскільки ми не можемо надсилати електронну пошту лише за допомогою 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: 'john@doe.com',
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. Вам потрібен обробник на стороні сервера для підключення до SMTP-сервера для фактичного надсилання пошти. В Інтернеті є багато простих скриптів пошти, таких як цей для PHP:

Використовуйте Ajax для надсилання запиту до сценарію PHP, переконайтеся, що потрібне поле не порожнє чи неправильне, використовуючи js, також зберігайте запис надсилань електронною поштою від вашого сервера.

function sendMail() is good for doing that.

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

$ .get (URL, зворотний дзвінок); $ .post (URL, зворотний дзвінок);

Оскільки це все чудово, є невелика api під назвою Mandrill для надсилання повідомлень з 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.');
        }
    }
  }