วิธีส่งอีเมลจาก JavaScript


244

ฉันต้องการให้เว็บไซต์ของฉันมีความสามารถในการส่งอีเมลโดยไม่ต้องรีเฟรชหน้าเว็บ ดังนั้นฉันต้องการใช้ 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 แต่ความเข้าใจของฉันคือที่ไม่ได้ส่งโดยตรงจากเว็บไซต์

ดังนั้นคำถามของฉันคือที่ฉันสามารถหาสิ่งที่จะใส่ในฟังก์ชั่นจาวาสคริปต์เพื่อส่งอีเมลโดยตรงจากเว็บไซต์

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

7
ใช้ภาษาฝั่งเซิร์ฟเวอร์เพื่อส่งอีเมลและ AJAX มีรูปลักษณ์ที่คุณต้องการ
Shadow Wizard คือ Ear For You

1
นี่อาจจะช้าไปหน่อย แต่สิ่งนี้อาจช่วยคุณได้: stackoverflow.com/questions/271171/…
PatrickMelia

2
ผู้ใช้ Gmail สามารถรับได้ดูDevelopers.google.com/gmail/api
Densi Tensy

ตามที่ระบุไว้ด้านล่างคุณอาจต้องการดูEmailJSซึ่งอนุญาตให้ส่งอีเมลโดยใช้เทมเพลตที่สร้างไว้ล่วงหน้าโดยตรงจาก Javascript และยังรองรับพารามิเตอร์แบบไดนามิกสิ่งที่แนบมา captcha REST API และอื่น ๆ นอกจากนี้เรายังนำเสนอระดับฟรีเพื่อเริ่มต้น [เปิดเผย - ฉันเป็นหนึ่งในผู้สร้าง]
Sasha

หมายเหตุหากคุณใช้คำตอบที่ยอมรับอีเมลจะมาจากบัญชีผู้ใช้ ในการส่งอีเมล์จากบัญชีส่วนบุคคลหรือธุรกิจของคุณวิธีการที่เหมาะสมคือการใช้จาวาสคริปต์ในการส่งอีเมลผ่านเซิร์ฟเวอร์ของคุณเองหรือบริการของบุคคลที่สามเช่นByteline รายละเอียดเพิ่มเติมในคำตอบนี้ด้านล่าง
dsbajna

คำตอบ:


311

คุณไม่สามารถส่งอีเมลโดยตรงด้วย javascript

อย่างไรก็ตามคุณสามารถเปิดโปรแกรมรับส่งเมลของผู้ใช้ได้:

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

นอกจากนี้ยังมีพารามิเตอร์บางอย่างในการเติมวัตถุและร่างกายล่วงหน้า:

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

วิธีแก้ไขปัญหาอื่นคือทำการโทร ajax ไปยังเซิร์ฟเวอร์ของคุณเพื่อให้เซิร์ฟเวอร์ส่งอีเมล ระวังอย่าให้ใครส่งอีเมลผ่านเซิร์ฟเวอร์ของคุณ


3
หากโปรแกรมที่เปิดหน้าเว็บนั้นมีคุณสมบัติไคลเอนต์อีเมลอยู่แล้ว .. (เช่น Opera 12.50) แสดงว่ามันเปิดลิงค์เป็น URL ปกติ ของพวกเขาคือธันเดอร์เบิร์ดซึ่งมีเครื่องยนต์ตุ๊กแกของ Firefox: มันสามารถเปิดเว็บเพจจากไฮเปอร์ลิงก์ในอีเมลเป็นแท็บใหม่
user2284570

11
เพียงแค่ทราบคุณยังสามารถใช้window.location.href(เช่นในคำตอบนี้: stackoverflow.com/questions/271171/… ) เพื่อเปิดโปรแกรมรับส่งอีเมลและจะไม่ทิ้งหน้าต่างว่างไว้ข้างหลังเมื่อผู้ใช้เสร็จสิ้นอีเมลแล้ว
Igneosaur

1
เป็นsubjectและbodyตัวแปรหรือว่าพวกเขาเป็นข้อความจริงที่จะอยู่ในทุ่ง?
Edward Karak

3
คำตอบนั้นไม่ได้ตอบคำถาม แต่คำตอบของ @ rahulroy นั้นดี
Medet Tleukabiluly

3
ฉันจะไปอีกขั้นหนึ่งและทำwindow.open( String( 'mailto:recipient^example.com' ).replace('^', '@') );เพื่อสร้างความสับสนให้บอทสแปม
Pavel Lebedeff

94

ทางอ้อมผ่านเซิร์ฟเวอร์ของคุณ - เรียกบุคคลที่สาม 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 ของคุณได้ดังนั้นผู้ใช้ที่เป็นอันตรายอาจใช้รหัสของคุณเพื่อส่งอีเมลที่ทำให้โควต้าของคุณหมดไป


8
แม้ว่าบทความนี้จะบอกว่าฉันรู้สึกเหมือนมันควรจะพูดที่นี่และแม้ว่ามันจะทำงานได้ แต่ก็มีปัญหาด้านความปลอดภัยบางอย่างที่คุณต้องส่งรหัส API ของคุณไปยังลูกค้าเช่นกัน สิ่งนี้อาจถูกทารุณกรรม
cantdutchthis นี้

35

ฉันไม่พบคำตอบที่พอใจกับคำถามต้นฉบับจริง ๆ

  • 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>

อีกครั้งในการเปิดเผยอย่างเต็มที่ฉันสร้างบริการนี้เพราะฉันไม่สามารถหาคำตอบที่เหมาะสม


ฉันกำลังมองหาโซลูชันนี้ขอบคุณสำหรับคำตอบ แต่ฉันสงสัยว่าฉันจะเพิ่มกล่องข้อความอีกหนึ่งกล่องในรูปแบบ html ได้อย่างไรเพราะเมื่อใดก็ตามที่ฉันพยายามเปลี่ยนรหัสเพื่อเพิ่มกล่องข้อความอีกหนึ่งกล่องสำหรับข้อมูลอื่น ๆ รหัสหยุดลง การทำงาน คุณรู้วิธีแก้ปัญหานี้หรือไม่
Suman

ผู้ใช้ Gmail จริงสามารถทำสิ่งที่คุณต้องการ - ดูdevelopers.google.com/gmail/apiดังนั้นผู้ให้บริการอีเมลรายอื่นอาจมี Javascript API ของพวกเขา
Densi Tensy

1
นี่คือทางออกที่ดีที่สุด ขอบคุณมาก. Mandrill ไม่มีแผนฟรีอีกต่อไปและ mailgun ไม่สนับสนุน cors ดังนั้น JavaScript
stallingOne

3
สิ่งนี้ไม่มีปัญหาเหมือนกับคนอื่น ๆ ใช่ไหม มีการเปิดเผยโทเค็นการเข้าถึง (คีย์ API)
Greg Ennis

1
พวกเขามีขีด จำกัด รายวัน 25 อีเมลต่อวัน
Archi

26

คุณสามารถค้นหาสิ่งที่จะใส่ในฟังก์ชั่น 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 (หรือภาษาใด ๆ ) ของคุณเองเพื่อส่งอีเมล


18

ฉันกำลังแตกข่าวให้คุณ คุณไม่สามารถส่งอีเมลพร้อม JavaScript ได้


จากบริบทของคำถาม OP คำตอบของฉันด้านบนไม่ถือเป็นจริงอีกต่อไปตามที่ @KennyEvitt ชี้ให้เห็นในความคิดเห็น ดูเหมือนว่าคุณสามารถใช้JavaScript เป็นลูกค้าของ

อย่างไรก็ตามฉันไม่ได้ขุดลึกลงไปเพื่อค้นหาว่ามันปลอดภัยและข้ามเบราว์เซอร์ที่เข้ากันได้หรือไม่ ดังนั้นฉันไม่สามารถสนับสนุนหรือกีดกันให้คุณใช้งานได้ ใช้ความเสี่ยงของคุณเอง


1
สามารถทำได้ด้วยอาแจ็กซ์หรือแม้กระทั่ง iframes ที่ซ่อนอยู่ ... คุณไม่เคยรู้เลย
Zebra

1
@danialentzri: JavaScript จะไม่ถ่ายทอด mail, นั่นคือสิ่งที่ผมหมายโดย"ต่อ"
Shef

โอ๊ะ! ฉันมีจอภาพขนาดเล็กเพื่อบอกความจริงกับคุณและมันไม่รองรับแถบเลื่อน
Zebra

@KennyEvitt จากภาพรวมอย่างรวดเร็วที่ฉันได้รับดูเหมือนว่าคุณยังต้องการการส่งเมล นั่นเป็นสิ่งที่ฉันพูดในคำตอบของฉัน
Shef

@Shef สิ่งที่คุณเห็นในภาพรวมอย่างรวดเร็วของคุณ? ฉันไม่พบสิ่งที่ต้องการนอกเหนือจากที่ลูกค้าอีเมลอื่นต้องการ หรือคุณอ้างว่ายกตัวอย่างเช่น Microsoft Outlook ไม่สามารถส่งอีเมลได้เช่นกัน? นั่นเป็นเรื่องจริงทางเทคนิค แต่ไม่ว่าในแง่ใดก็ตามที่ฉันคาดหวังให้คนอื่นเข้าใจ
Kenny Evitt

16

ฉันรู้ว่าฉันสายเกินไปที่จะเขียนคำตอบสำหรับคำถามนี้ แต่อย่างไรก็ตามฉันคิดว่านี่จะใช้กับใครก็ตามที่กำลังคิดที่จะส่งอีเมลออกทาง javascript

วิธีแรกที่ฉันแนะนำคือใช้การโทรกลับเพื่อทำสิ่งนี้บนเซิร์ฟเวอร์ หากคุณต้องการให้จัดการโดยใช้ javascript folowing เป็นสิ่งที่ฉันแนะนำ

วิธีที่ง่ายที่สุดที่ฉันพบคือใช้ 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 เช่นอีเมลยืดหยุ่น

นอกจากนี้ที่นี่ยังมีลิงก์ไปยังเว็บไซต์ทางการของSmtpJS.comที่คุณสามารถค้นหาตัวอย่างทั้งหมดที่คุณต้องการและสถานที่ที่คุณสามารถสร้างโทเค็นที่ปลอดภัยของคุณได้

ฉันหวังว่าบางคนจะพบว่ารายละเอียดนี้มีประโยชน์ การเข้ารหัสที่มีความสุข


3
นี่ยังคงให้สิทธิ์การเข้าถึงเซิร์ฟเวอร์ SMTP ของคุณแก่บุคคลที่สามอย่างเต็มรูปแบบเพื่อให้พวกเขาสามารถส่งต่อจดหมายให้คุณเพื่อแลกกับ ... อะไรนะ?
เควนติน

SecureToken นั้นใช้ได้เฉพาะโดเมนที่คุณระบุเมื่อสร้างดังนั้นการเรียก js จากโดเมนอื่นจะไม่ทำงาน
smoore4

8

ดูเหมือนจะมีทางออกใหม่ที่ขอบฟ้า มันเรียกว่าEmailJS พวกเขาอ้างว่าไม่จำเป็นต้องใช้รหัสเซิร์ฟเวอร์ คุณสามารถขอคำเชิญ

อัปเดตสิงหาคม 2559: ดูเหมือนว่า EmailJS จะใช้งานได้แล้ว คุณสามารถส่งอีเมลได้ฟรีสูงสุด 200 ฉบับต่อเดือนและมีการสมัครรับข้อมูลปริมาณมากขึ้น


นี่เป็นบิตของ bum steer, UI ที่น่ารักมาก แต่มีทุกอย่างที่เป็นตัวอย่างเอกสารหรือความช่วยเหลือ หลีกเลี่ยงการ
Skarsnik

ฉันลองใช้อีเมล JS แต่มันส่งถึงอีเมลของฉันเท่านั้น ฉันจะส่งไปยังอีเมลอื่นได้อย่างไร?
Maged Saeed

สิ่งนี้ล่าช้า แต่ @MagedSaeed ในส่วนเทมเพลตอีเมลเมื่อแก้ไขเทมเพลตคุณสามารถระบุอีเมล "ถึง" คุณสามารถสร้างฟิลด์ "ถึง" แบบไดนามิกโดยใช้ตัวเลือกการสร้างเทมเพลต เอกสารของพวกเขาทำงานได้ดีโดยมีรายละเอียด
abagh0703

6

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

4

Javascript เป็นฝั่งไคลเอ็นต์คุณไม่สามารถส่งอีเมลด้วย Javascript ได้ เบราว์เซอร์อาจรู้จักเท่านั้นmailto:และเริ่มต้นไคลเอ็นต์จดหมายเริ่มต้นของคุณ


นั่นจะอธิบายว่าทำไมฉันไม่พบข้อมูลใด ๆ ขอบคุณ!!
user906357

สิ่งเดียวกัน ... Future API ที่อาจทำให้การเชื่อมต่อ raw กับพอร์ตกำลังจะมา ...
user2284570

นี่คือคำตอบที่ถูกต้องที่สุด! คำตอบอื่น ๆ ทั้งหมดที่ทำให้เป็นไปได้กำลังใช้ back-end อยู่ที่ไหนสักแห่ง .. OP กล่าวว่า Javascript เท่านั้น ไม่มีความหมายโปรดจบสิ้นแม้ว่าจะเป็น SAAS แบ็กเอนด์ คำตอบที่ดี
Dan Chase

4

ในsendMail()ฟังก์ชั่นของคุณเพิ่มการโทร ajax ให้กับแบ็กเอนด์ของคุณซึ่งคุณสามารถนำไปใช้กับฝั่งเซิร์ฟเวอร์


4

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="yourfreind@something.somthing"></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>


มันใช้ไคลเอนต์อีเมลไม่ใช่โดยตรงจาก javascript
Weijing Jay Lin

2
นอกจากนี้ในขณะที่มันเป็นเรื่องดีที่มีตัวอย่างที่สมบูรณ์ CSS เพียงแค่สับสนเพราะทุกคนต้องกรองสิ่งนั้นออกเพื่อให้เข้าใจตัวอย่าง ไม่มีความผิดหมายถึง
Dan Chase

2

JavaScript ไม่สามารถส่งอีเมลจากเว็บเบราว์เซอร์ อย่างไรก็ตามการย้อนกลับจากโซลูชันที่คุณได้ลองใช้แล้วคุณสามารถทำสิ่งที่ตรงตามข้อกำหนดเดิม:

ส่งอีเมลโดยไม่ต้องรีเฟรชหน้า

คุณสามารถใช้ JavaScript เพื่อสร้างค่าที่ต้องการอีเมลจากนั้นทำการร้องขอ AJAX ไปยังทรัพยากรเซิร์ฟเวอร์ที่ส่งอีเมลจริง (ฉันไม่รู้ภาษา / เทคโนโลยีฝั่งเซิร์ฟเวอร์ที่คุณใช้อยู่ดังนั้นส่วนนั้นขึ้นอยู่กับคุณ)

หากคุณไม่คุ้นเคยกับ AJAX การค้นหาโดย Google อย่างรวดเร็วจะให้ข้อมูลมากมายแก่คุณ โดยทั่วไปคุณสามารถทำให้มันใช้งานได้อย่างรวดเร็วด้วยฟังก์ชัน $ .ajax () ของ jQuery คุณเพียงแค่ต้องมีหน้าบนเซิร์ฟเวอร์ที่สามารถเรียกได้ในคำขอ


2

ดูเหมือนว่า 'คำตอบ' สิ่งนี้คือการใช้ไคลเอนต์ SMPT ดูemail.jsสำหรับไลบรารี JavaScript ด้วยไคลเอนต์ SMTP

นี่คือ repo GitHubสำหรับไคลเอ็นต์ SMTP จาก README ของ repo ปรากฏว่าอาจจำเป็นต้องใช้ shims หรือ polyfills ต่าง ๆ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของลูกค้า แต่โดยรวมแล้วดูเหมือนว่าเป็นไปได้ คำตอบยาว ๆ ที่นี่


2

มีบริการรวมกัน คุณสามารถรวมโซลูชันที่ระบุไว้ข้างต้นเช่น mandrill กับบริการ EmailJS ซึ่งจะทำให้ระบบมีความปลอดภัยมากขึ้น พวกเขายังไม่ได้เริ่มให้บริการ


2

อีกวิธีในการส่งอีเมลจาก 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!");
 }

อีกทางเลือกหนึ่งหากคุณต้องการเข้าถึงเซิร์ฟเวอร์ SMTP ก็คือการใช้สคริปต์นี้ที่smtpjs.com/smtp.js ที่เรียกว่าดังนี้ Email.send ("from@you.com", "to@them.com", "หัวเรื่อง", "Body", "smtp.yourisp.com", "ชื่อผู้ใช้", "รหัสผ่าน"); - ดู smtpjs.com
Fiach Reid

1
คุณสามารถส่ง html โดยใช้ smtp.js ได้ไหม
Alejandro Corredor

@AlejandroCorredor - ใช่คุณสามารถส่งอีเมล HTML ผ่าน SMTPJS
Fiach Reid

2

ฉันจะทำอย่างนั้นกับห้องสมุดSMTPJ มันให้การเข้ารหัสข้อมูลรับรองของคุณเช่นชื่อผู้ใช้รหัสผ่านเป็นต้น


1
ฉันจะเป็นจริงๆไม่เต็มใจที่จะให้รหัสผ่าน SMTP ของฉันที่จะเป็น บริษัท เล็ก ๆ เพื่อให้พวกเขาสามารถส่งอีเมลโดยใช้เซิร์ฟเวอร์ของฉันในการแลกเปลี่ยนสำหรับอะไรมากไปกว่ารหัสผ่านของฉัน ฉันไม่จ่ายเงิน พวกเขาไม่มีแรงจูงใจที่แข็งแกร่งในการให้บริการทำงาน / ปกป้องข้อมูลประจำตัวของฉัน / ไม่ใช้เซิร์ฟเวอร์ของฉันสำหรับสแปมของพวกเขา
เควนติน

@Quentin ฉันเข้าใจแล้ว แต่ห้องสมุดนี้อาจตอบคำถามได้
Suhail Mumtaz Awan

2

ไม่มีคำตอบที่ตรงกับคำถามของคุณเนื่องจากเราไม่สามารถส่งอีเมลโดยใช้ javascript เท่านั้น แต่มีวิธีใช้ javascript ในการส่งอีเมลให้เรา:

1) ใช้ api to และโทร 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/');

ซึ่งจะเปิดแอปพลิเคชันอีเมลของคุณซึ่งอาจเป็นการป๊อปอัปที่ถูกบล็อกในเบราว์เซอร์ของคุณ

โดยทั่วไปการส่งอีเมลเป็นภารกิจเซิร์ฟเวอร์ดังนั้นควรทำในภาษาแบ็กเอนด์ แต่เราสามารถใช้จาวาสคริปต์เพื่อรวบรวมข้อมูลที่จำเป็นและส่งไปยังเซิร์ฟเวอร์หรือ API เรายังสามารถใช้แอปพลิเคชันที่สามและเปิดพวกเขา ผ่านเบราว์เซอร์โดยใช้ javascript ดังกล่าวข้างต้น


5
เรื่อง (1): ฉันจะเป็นจริงๆไม่เต็มใจที่จะให้รหัสผ่าน SMTP ของฉันที่จะเป็น บริษัท เล็ก ๆ เพื่อให้พวกเขาสามารถส่งอีเมลโดยใช้เซิร์ฟเวอร์ของฉันในการแลกเปลี่ยนสำหรับอะไรมากไปกว่ารหัสผ่านของฉัน ฉันไม่จ่ายเงิน พวกเขาไม่มีแรงจูงใจที่แข็งแกร่งในการให้บริการทำงาน / ปกป้องข้อมูลประจำตัวของฉัน / ไม่ใช้เซิร์ฟเวอร์ของฉันสำหรับสแปมของพวกเขา
Quentin

0

คำตอบสั้น ๆ คือคุณไม่สามารถทำได้โดยใช้ JavaScript เพียงอย่างเดียว คุณต้องการตัวจัดการฝั่งเซิร์ฟเวอร์เพื่อเชื่อมต่อกับเซิร์ฟเวอร์ SMTP เพื่อส่งจดหมาย มีสคริปต์อีเมลแบบง่ายมากมายออนไลน์เช่นสคริปต์นี้สำหรับ PHP:

ใช้Ajaxเพื่อส่งคำขอไปยังสคริปต์ PHP ตรวจสอบว่าฟิลด์ที่ต้องการไม่ว่างเปล่าหรือไม่ถูกต้องโดยใช้ js นอกจากนี้ยังเก็บบันทึกการส่งจดหมายโดยผู้ที่มาจากเซิร์ฟเวอร์ของคุณ

function sendMail() is good for doing that.

ตรวจสอบข้อผิดพลาดที่พบขณะส่งจดหมายจากสคริปต์ของคุณและดำเนินการตามความเหมาะสม
สำหรับการแก้ไขมันตัวอย่างเช่นถ้าที่อยู่อีเมลไม่ถูกต้องหรือจดหมายไม่ได้ถูกส่งเนื่องจากปัญหาเซิร์ฟเวอร์หรืออยู่ในคิวในสภาพเช่นนั้นรายงานไปยังผู้ใช้ทันทีและป้องกันไม่ให้ส่งอีเมลซ้ำหลายครั้งซ้ำแล้วซ้ำอีก รับการตอบกลับจากสคริปต์ของคุณโดยใช้ jQuery GET และ POST

$ รับการตอบสนอง (URL, โทรกลับ); $ .post (URL, โทรกลับ);


-1

เนื่องจากสิ่งเหล่านี้ทั้งหมดเป็นข้อมูลที่ยอดเยี่ยมจึงมี api เล็กน้อยที่เรียกว่าMandrillเพื่อส่งอีเมลจาก javascript และทำงานได้อย่างสมบูรณ์แบบ คุณสามารถให้มันยิง นี่คือการสอนเล็กน้อยสำหรับการเริ่มต้น


-5

ส่งอีเมลโดยใช้ 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.');
        }
    }
  }

3
โปรดอธิบายรายละเอียดเกี่ยวกับวิธีที่รหัสนี้ตอบคำถาม
JAL

ดูเหมือนว่านี่คือการใช้ ActiveX และใช้งานได้เฉพาะใน IE บนพีซีที่ติดตั้ง Outlookvar objO = new ActiveXObject('Outlook.Application');
Chic
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.