ChatGPT解决这个技术问题 Extra ChatGPT

如何从 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...    */
}
使用服务器端语言来实际发送电子邮件,并使用 AJAX 来获得您想要的外观和感觉。
这可能有点晚了,但这可能会对您有所帮助:stackoverflow.com/questions/271171/…
Gmail 用户可以拥有,请参阅developers.google.com/gmail/api
如下所述,您可能还想看看 EmailJS,它允许直接从 Javascript 使用预先构建的模板发送电子邮件,并且还支持动态参数、附件、验证码、REST API 等。我们还提供免费套餐以开始使用 [披露 - 我是创作者之一]
请注意,如果您使用接受的答案,电子邮件将来自用户的帐户。要从您的个人或企业帐户发送电子邮件,正确的方法是使用 javascript 通过您自己的服务器或第三方服务(例如 Byteline)发送电子邮件。更多详情请参阅下方的 answer

J
Jacob

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

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

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

还有一些参数可以预先填充主题和正文:

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

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


如果打开页面的程序已经具有电子邮件客户端功能..(如 Opera 12.50)那么,它会将链接作为常规 URL 打开。他们也是具有 Firefox gecko 引擎的 Thunderbird:它可以从电子邮件中的超链接打开网页作为新标签。
请注意,您也可以使用 window.location.href(如在此答案中:stackoverflow.com/questions/271171/…)打开电子邮件客户端,当用户完成电子邮件时,它不会留下那个空窗口。
subjectbody 是变量还是字段中的实际文本?
该答案确实没有回答问题,但@rahulroy 的答案很好
我会更进一步,做 window.open( String( 'mailto:recipient^example.com' ).replace('^', '@') ); 来混淆垃圾邮件机器人
M
MatthewMartin

通过您的服务器间接 - 调用 3rd Party API - 安全且推荐

您的服务器可以在经过适当的身份验证和授权后调用 3rd Party API。 API 密钥不向客户端公开。

node.js - https://www.npmjs.org/package/node-mandrill

const 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){
            
    let _name = req.body.name;
    let _email = req.body.email;
    let _subject = req.body.subject;
    let _messsage = req.body.message;

    //implement your spam protection or checks. 

    sendEmail ( _name, _email, _subject, _message );

});

然后在客户端使用 $.ajax 来调用您的电子邮件 API。

直接来自客户端 - 调用第 3 方 API - 不推荐

Send an email using only JavaScript

简而言之:

注册 Mandrill 以获取 API 密钥加载 jQuery 使用 $.ajax 发送电子邮件

像这样 -

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


尽管文章确实这么说,但我觉得这里也应该说,即使这可行,也存在一些安全问题,因为您还需要将 api 密钥发送给客户端。这可能会被滥用。
B
BarryCap

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

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 表单中再添加一个文本框,因为每当我尝试更改代码以为其他信息添加一个文本框时,代码就会停止在职的。你知道任何解决方案。
这是最好的解决方案。非常感谢。 Mandrill 不再有免费计划,mailgun 不支持 cors 和 JavaScript
这不和其他人有同样的问题吗?访问令牌(API Key)被暴露
他们每天限制为 25 封电子邮件。
现在应该备份了。对于那个很抱歉!
P
Pissu Pusa

我知道我为这个问题写答案太晚了,但我认为这将适用于任何想通过 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 : "这是主题", 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 : “这就是正文” }).then( message => alert(message) );

最后,如果您没有 SMTP 服务器,您可以使用 smtp 中继服务,例如 Elastic Email

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

我希望有人觉得这些细节有用。快乐编码。


这仍然为第三方提供对您的 SMTP 服务器的完全访问权限,以便他们可以为您中继邮件以换取……什么?
SecureToken只对你创建时指定的域有效,所以从另一个域调用js是行不通的。
@smoore4 是的,但他们仍然必须在他们的服务器上对其进行解密,并且他们可以访问您的密码和资料。我不会相信这项服务。
最安全也是唯一的方法是托管您自己的服务
错误 Uncaught ReferenceError: Email is not defined 是预期的吗?我很确定您没有定义 Email。还是您使用了代码片段而不仅仅是代码围栏,而我们不应该运行它?另外我认为你还不算太晚。
R
Ry-

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


T
Tofandel

我要告诉你这个消息。您不能使用 JavaScript 本身发送电子邮件。

根据 OP 问题的上下文,正如@KennyEvitt 在评论中指出的那样,我上面的回答不再适用。看起来您可以使用 JavaScript as an SMTP client

但是,我还没有深入研究它是否足够安全和跨浏览器兼容。所以,我既不能鼓励也不能阻止你使用它。使用风险自负。


可以用 ajax 甚至隐藏的 iframe 来完成……你永远不知道
@danialentzri:JavaScript 永远不会成为邮件中继,这就是我所说的“本身”。
哎呀!我有一个小显示器告诉你真相,它不支持滚动条。
@KennyEvitt 我快速浏览了一下,似乎您仍然需要邮件中继。这基本上就是我在回答中所说的。
@Shef 您快速浏览了一下看到了什么?除了任何其他电子邮件客户端的要求之外,我找不到任何要求。或者您是否声称,例如,Microsoft Outlook 也无法发送电子邮件?这在技术上是正确的,但在任何意义上我都不希望其他人理解。
C
Christiaan Westerbeek

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

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


这有点笨拙,非常漂亮的 UI,但包含所有文档示例或帮助。避免。
我尝试了 emailJS,但它只发送到我的电子邮件。如何发送到任何其他电子邮件?
这已经晚了,但在电子邮件模板部分@MagedSaeed,在编辑模板时,您可以指定“收件人”电子邮件。您甚至可以使用他们的模板选项使“收件人”字段动态化。他们的文档很好地详细说明了它。
刚刚将 EmailJS 集成到我的 React 应用程序中。它工作得很好,安装起来非常顺利。电子邮件直接发送到我想要的电子邮件。确保添加 reCAPTCHA。这次真是万分感谢!
M
Megan Caithlyn

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

J
Jeremy Huiskamp

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


e
evilone

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


这可以解释为什么我找不到任何关于它的信息。谢谢!!
同样的事情......未来的 API 可以允许与端口的原始连接即将到来......
这是最准确的答案!使它听起来成为可能的所有其他答案,都在某处使用后端.. OP 只说 Javascript。意思是,请不要后端,即使它是 SAAS 后端。很好的答案。
D
David

JavaScript 无法从 Web 浏览器发送电子邮件。但是,从您已经尝试实施的解决方案中退后一步,您可以做一些满足原始要求的事情:

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

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

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


K
Kenny Evitt

似乎对此的一个“答案”是实现一个 SMPT 客户端。有关带有 SMTP 客户端的 JavaScript 库,请参阅 email.js

Here's the GitHub repo 用于 SMTP 客户端。根据 repo 的自述文件,根据客户端浏览器的不同,似乎可能需要各种 shims 或 polyfill,但总体而言,它确实似乎是可行的(如果实际上没有显着完成),但不是以一种即使是合理的方式也很容易描述的方式 -长答案在这里。


S
Santhosh Menon

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


F
Fiach Reid

从 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", "Subject", "Body.", "smtp.yourisp.com", "username", "password"); - 见 smtpjs.com
你可以使用 smtp.js 发送 html 吗?
@AlejandroCorredor - 是的,您可以通过 SMTPJS 发送 HTML 电子邮件
directtomx.com 的域名可以转让
A
Alireza

您的问题没有直接的答案,因为我们不能仅使用 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 的浏览器。


回复(1):我真的不愿意将我的 SMTP 密码提供给一家小公司,这样他们就可以使用我的服务器发送电子邮件,只换取我的密码。我不付钱给他们。他们没有强烈的动机来保持服务运行/真正保护我的凭据/不使用我的服务器来发送垃圾邮件。
S
Suhail Mumtaz Awan

当且仅当我必须使用 some js 库时,我才会使用 SMTPJs 库。它为您的凭据(例如用户名、密码等)提供加密。


我真的不愿意将我的 SMTP 密码提供给一家很小的公司,这样他们就可以使用我的服务器发送电子邮件,只换取我的密码。我不付钱给他们。他们没有强烈的动机来保持服务运行/真正保护我的凭据/不使用我的服务器来发送垃圾邮件。
@Quentin 我理解,但是这个库可以回答这个问题。
P
P. BANERJEE

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

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

function sendMail() is good for doing that.

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

$.get(URL,回调); $.post(URL,回调);


S
Sercan Ozdemir

因为这些都是很棒的信息,所以有一个名为 Mandrill 的小 api 可以从 javascript 发送邮件,它运行良好。你可以试一试。这里有一个小的 tutorial 作为开始。


A
Anil Rathod

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

请详细说明此代码如何回答问题。
看起来这是在使用 ActiveX,并且只能在安装了 Outlook 的 PC 上的 IE 中使用var objO = new ActiveXObject('Outlook.Application');
我认为这是相当“黄金”。不管这意味着什么。