如何从 JavaScript 发送电子邮件

您不能直接使用 javascript 发送电子邮件。

但是，您可以打开用户的邮件客户端：

window.open('mailto:[email protected]');

还有一些参数可以预填充主体和正文：

window.open('mailto:[email protected]?subject=subject&body=body');

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

我向你透露这个消息。您不能使用 JavaScript 本身发送电子邮件。

根据 OP 问题的上下文，正如 @KennyEvitt 在评论中指出的那样，我上面的答案不再成立。看起来您可以将 JavaScript 用作 SMTP 客户端。

但是，我还没有深入挖掘它是否足够安全且与跨浏览器兼容。所以，我既不能鼓励也不能劝阻你使用它。使用风险自负。

Javascript 是客户端的，您不能使用 Javascript 发送电子邮件。浏览器可能只能识别并启动您的默认邮件客户端。mailto:

在函数中，向后端添加一个 ajax 调用，您可以在服务器端实现此调用。sendMail()

您可以在这篇文章中找到要放入 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 无法从 Web 浏览器发送电子邮件。但是，从已尝试实现的解决方案退后一步，可以执行满足原始要求的操作：

在不刷新页面的情况下发送电子邮件

您可以使用 JavaScript 构造电子邮件所需的值，然后向实际发送电子邮件的服务器资源发出 AJAX 请求。（我不知道您正在使用什么服务器端语言/技术，因此这部分取决于您。

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

通过您的服务器间接 - 调用第三方 API - 安全且推荐

您的服务器可以调用第三方 API。API 密钥不会向客户端公开。

节点 .js

const axios = require('axios');

async function sendEmail(name, email, subject, message) {
  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const config = {
    method: 'post',
    url: 'https://api.mailjet.com/v3.1/send',
    data: data,
    headers: {'Content-Type': 'application/json'},
    auth: {username: '<API Key>', password: '<Secret Key>'},
  };

  return axios(config)
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
    .catch(function (error) {
      console.log(error);
    });

}

// define your own email api which points to your server.
app.post('/api/sendemail/', function (req, res) {
  const {name, email, subject, message} = req.body;
  //implement your spam protection or checks.
  sendEmail(name, email, subject, message);
});

然后在客户端使用 fetch 调用您的电子邮件 API。 用于在Mailjet上注册的用途。您也可以验证更多地址。Mailjet 提供慷慨的免费套餐。from email

2023 年更新：正如评论中指出的那样，由于 CORS 的原因，以下方法不再有效

仅当您要测试发送电子邮件并执行此操作时，这才有用

• 访问 https://api.mailjet.com/stats（是的，A 404 页面）
• 并在浏览器控制台中运行此代码（并填充机密）

直接从客户端 - 调用第三方 API - 不推荐

总之：

1. 注册 Mailjet 以获取 API 密钥和密钥
2. 使用 fetch 调用 API 发送电子邮件

喜欢这个-

function sendMail(name, email, subject, message) {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.set('Authorization', 'Basic ' + btoa('<API Key>'+":" +'<Secret Key>'));

  const data = JSON.stringify({
    "Messages": [{
      "From": {"Email": "<YOUR EMAIL>", "Name": "<YOUR NAME>"},
      "To": [{"Email": email, "Name": name}],
      "Subject": subject,
      "TextPart": message
    }]
  });

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: data,
  };

  fetch("https://api.mailjet.com/v3.1/send", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
}

sendMail('Test Name',"<YOUR EMAIL>",'Test Subject','Test Message')

注意：请记住，您的 API 密钥对任何人都可见，因此任何恶意用户都可能使用您的密钥发送可能占用您的配额的电子邮件。

简短的回答是，你不能单独使用 JavaScript 来做到这一点。您需要一个服务器端处理程序来与 SMTP 服务器连接以实际发送邮件。网上有许多简单的邮件脚本，例如PHP的脚本：

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

function sendMail() is good for doing that.

检查从脚本发送邮件时是否发现任何错误，并采取适当的措施。 例如，如果邮件地址不正确或由于服务器问题而未发送邮件，或者在这种情况下处于队列中，请立即将其报告给用户，并防止一次又一次地多次发送相同的电子邮件。
使用 jQuery GET 和 POST 从脚本中获取响应

$.get（URL，回调）; $.post（URL，回调）;

由于这些都是很棒的信息，所以有一个名为 Mandrill 的小 API 可以从 javascript 发送邮件，并且它运行良好。你可以试一试。这里有一个小教程作为开始。

似乎一个“答案”是实现 SMPT 客户端。请参阅 email.js 了解具有 SMTP 客户端的 JavaScript 库。

下面是 SMTP 客户端的 GitHub 存储库。根据 repo 的 README，似乎可能需要各种填充码或 polyfill，具体取决于客户端浏览器，但总的来说，它确实似乎是可行的（如果不是实际上显着完成的话），而不是以一种很容易描述的方式，即使是一个合理的长答案在这里。

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

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

有组合服务。您可以将上面列出的解决方案（如 mandrill）与 EmailJS 服务相结合，这可以使系统更加安全。 不过，他们还没有启动这项服务。

window.open（'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);

从 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!");
 }

使用 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.');
        }
    }
  }

我找不到一个真正满足原始问题的答案。

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

j查询：

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

同样，在充分披露的情况下，我创建了这项服务，因为我找不到合适的答案。

当且仅当我必须使用 js 库时，我才会使用 SMTPJ 库来做到这一点。它为您的凭据（例如用户名，密码等）提供加密。some

您的问题没有直接的答案，因为我们不能仅使用 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: '[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来处理它，我建议这样做。

我发现最简单的方法是使用 smtpJs。一个可用于发送电子邮件的免费库。

1.包含如下脚本

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

2. 您可以像这样发送电子邮件

Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : '[email protected]',
    From : "[email protected]",
    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 : '[email protected]',
    From : "[email protected]",
    Subject : "This is the subject",
    Body : "And this is the body"
}).then(
  message => alert(message)
);

最后，如果您没有 SMTP 服务器，则使用 smtp 中继服务，例如 Elastic Email

此外，这里是官方 SmtpJS.com 网站的链接，您可以在其中找到所需的所有示例以及可以创建安全令牌的位置。

我希望有人觉得这个细节有用。祝您编码愉快。

完整的反垃圾邮件版本：

<div class="at">info<i class="fa fa-at"></i>google.com</div>
OR
<div class="at">info&#x40;google.com</div>


<style>
.at {
  color: blue;
  cursor: pointer;
}
.at:hover {
  color: red;
}
</style>

<script>
const el33 = document.querySelector(".at");
el33.onclick = () => {
  let recipient="info";
  let at = String.fromCharCode(64);
  let dotcom="google.com";
  let mail="mailto:";
  window.open(mail+recipient+at+dotcom);
}
</script>