如何从JavaScript发送电子邮件

时间:2011-09-11 20:50:22

标签: javascript email

我希望我的网站能够在不刷新页面的情况下发送电子邮件。所以我想使用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...    */
}

20 个答案:

答案 0 :(得分:266)

您无法使用javascript直接发送电子邮件。

但是,您可以打开用户的邮件客户端:

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

还有一些参数可以预先填充主体和身体:

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

另一种解决方案是对服务器进行ajax调用,以便服务器发送电子邮件。小心不要让任何人通过您的服务器发送任何电子邮件。

答案 1 :(得分:86)

间接通过您的服务器 - 调用第三方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 - 不推荐


Send an email using only 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密钥,因此任何恶意用户都可能会使用您的密钥发送可能会占用您配额的电子邮件。

答案 2 :(得分:29)

我无法找到真正满足原始问题的答案。

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

同样,在完整披露中,我创建了这项服务,因为我找不到合适的答案。

答案 3 :(得分:25)

你可以在这篇文章中找到放在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(或任何语言)脚本来发送电子邮件。

答案 4 :(得分:17)

我正在向你发消息。您无法发送包含JavaScript的电子邮件。


根据OP问题的背景,正如@KennyEvitt在评论中指出的那样,我上面的答案不再适用。您似乎可以使用JavaScript as an SMTP client

然而,我没有深入挖掘,看看它是否安全&amp;跨浏览器兼容性足够。所以,我既不鼓励也不鼓励你使用它。使用风险自负。

答案 5 :(得分:7)

似乎有一种新的解决方案。它被称为EmailJS。他们声称不需要服务器代码。您可以申请邀请。

2016年8月更新:EmailJS似乎已经上线了。您每月最多可以免费发送200封电子邮件,并且可以订阅更高的订阅量。

答案 6 :(得分: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);

答案 7 :(得分:4)

sendMail()功能中,向后端添加ajax调用,您可以在服务器端实现此操作。

答案 8 :(得分:4)

Javascript是客户端,你不能用Javascript发送电子邮件。浏览器仅识别mailto:并启动默认邮件客户端。

答案 9 :(得分:3)

由于我们无法仅使用javascript发送电子邮件,因此您的问题没有直接答案,但有一些方法可以使用javascript为我们发送电子邮件:

1)使用api并通过javascript调用api为我们发送电子邮件,例如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通过浏览器打开它们。

答案 10 :(得分:2)

JavaScript无法从网络浏览器发送电子邮件。但是,从您已尝试实施的解决方案退回,您可以做一些符合原始要求的事情:

  

发送电子邮件而不刷新页面

您可以使用JavaScript构建电子邮件所需的值,然后向实际发送电子邮件的服务器资源发出AJAX请求。 (我不知道您正在使用哪种服务器端语言/技术,因此该部分取决于您。)

如果您不熟悉AJAX,快速Google搜索会为您提供大量信息。通常,您可以使用jQuery的$ .ajax()函数快速启动并运行它。您只需要在服务器上有一个可以在请求中调用的页面。

答案 11 :(得分:2)

似乎对此的'回答'是实现SMPT客户端。有关带有SMTP客户端的JavaScript库,请参阅email.js

Here's the GitHub repo用于SMTP客户端。基于repo的自述文件,根据客户端浏览器的不同,可能需要使用各种填充程序或填充程序,但总的来说它确实看起来可行(如果实际上没有实际完成),即使是合理的,也不能轻易描述的方式 - 这里的答案很长。

答案 12 :(得分:2)

有组合服务。您可以将上面列出的解决方案(例如mandrill)与服务EmailJS结合使用,这可以使系统更安全。 他们还没有开始服务。

答案 13 :(得分: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!");
 }

答案 14 :(得分:2)

我知道我为这个问题写一个答案还为时已晚,但是我认为这对那些想通过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凭据,并将其锁定到单个域,然后传递安全令牌代替凭据。< / p>

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 website的链接,您可以在其中找到所需的所有示例以及可以创建安全令牌的位置。

我希望有人认为此详细信息有用。编码愉快。

答案 15 :(得分:1)

我会使用SMTPJs库来执行此操作。它会为您的凭据提供加密,例如用户名,密码等。

答案 16 :(得分:0)

简短的回答是,您无法单独使用JavaScript。您需要服务器端处理程序才能与SMTP服务器连接以实际发送邮件。网上有很多简单的邮件脚本,例如PHP的这个:

使用 Ajax 向PHP脚本发送请求,使用js检查必填字段是否为空或不正确还要保留服务器发送邮件的记录。

function sendMail() is good for doing that.

检查从脚本邮寄时捕获的任何错误并采取适当的措施 为了解决它,例如,如果邮件地址不正确或者由于服务器问题而没有发送邮件,或者在这种情况下它处于队列状态,请立即向用户报告,并防止多次发送同一封电子邮件。 从脚本获取响应使用jQuery GET和POST

  

$得到(URL,回调);   $ .POST(URL,回调);

答案 17 :(得分:0)

&#13;
&#13;
function send() {
  setTimeout(function() {
    window.open("mailto:" + document.getElementById('email').value + "?subject=" + document.getElementById('subject').value + "&body=" + document.getElementById('message').value);
  }, 320);
}
&#13;
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);
}
&#13;
<!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>
&#13;
&#13;
&#13;

答案 18 :(得分:-1)

由于这些都是精彩的信息,因此有一个名为Mandrill的小api来自javascript发送邮件,它完美无缺。你可以试一试。这是一个小tutorial的开始。

答案 19 :(得分:-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.');
        }
    }
  }