JavaScriptからEメールを送信する方法
自分のウェブサイトに、ページを更新せずにEメールを送信する機能を持たせたい。だから私は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メソッドを使用する例を見つけました、しかし私の理解はそれが実際にサイトから直接送らないということです。
そこで私の質問は、Webサイトから直接Eメールを送信するためにJavaScript関数内に何を入れるべきかを見つけることができるということです。
function sendMail() {
/* ...code here... */
}
Javascriptを使って直接Eメールを送信することはできません。
ただし、ユーザーのメールクライアントを開くことはできます。
window.open('mailto:[email protected]');
件名と本文を事前入力するためのパラメータもいくつかあります。
window.open('mailto:[email protected]?subject=subject&body=body');
もう1つの解決策は、サーバーが電子メールを送信するように、サーバーに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: '[email protected]',
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 );
});
そして、あなたのメールAPIを呼び出すためにクライアント上でuse $ .ajaxを使用してください。
クライアントから直接 - サードパーティAPIの呼び出し - 推奨されていません
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': '[email protected]',
'to': [
{
'email': '[email protected]',
'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キーは誰にでも見えるので、悪意のあるユーザーがあなたの割り当てを使い果たす可能性があるEメールを送信するためにあなたのキーを使用するかもしれないことに留意してください。
元の質問を本当に満足する答えを見つけることができませんでした。
- 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>
繰り返しますが、私は適切な答えを見つけることができなかったので、私はこのサービスを作成しました。
この記事では、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が指摘したように、OPの質問の文脈に基づいて、上記の私の答えはもはや当てはまりません。 SMTPクライアントとして JavaScriptを使用できるように見えます 。
しかし、私はそれが十分な安全性とクロスブラウザ互換性があるかどうかを調べるためにもっと深く掘り下げていません。それで、私はあなたがそれを使うのを奨励することも落胆させることもできません。自己責任。
地平線には新しい解決策があるようです。 EmailJS と呼ばれます。彼らは、サーバーコードは必要ないと主張しています。招待状をリクエストできます。
2016年8月に更新：EmailJSはすでに公開されているようです。あなたは無料で毎月200電子メールまで送信することができ、それはより多くのボリュームのための購読を提供しています。
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はクライアントサイドです。Javascriptを使って電子メールを送信することはできません。ブラウザはおそらくmailto:しか認識せず、デフォルトのメールクライアントを起動します。
sendMail()関数で、バックエンドにajax呼び出しを追加します。ここで、サーバーサイドでこれを実装できます。
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）あなたのためにEメールを送るためのバックエンドコードを作成します、あなたはあなたのためにそれをするためにどんなバックエンドフレームワークを使用することができます。
3）のようなものを使用して：
window.open('mailto:me@http://stackoverflow.com/');
あなたの電子メールアプリケーションを開くでしょう、これはあなたのブラウザでブロックされたポップアップに入るかもしれません。
一般的に、Eメールの送信はサーバータスクなので、バックエンド言語で行う必要がありますが、必要なデータを収集してサーバーまたはAPIに送信するにはjavascriptを使用できます。上記のようにJavaScriptを使用してブラウザ経由で。
コンビネーションサービスがあります。あなたはシステムをより安全にすることができるサービスEmailJSとmandrillのような上記の解決策を組み合わせることができます。彼らはまだサービスを開始していません。
これに対する1つの「答え」は、SMPTクライアントを実装することです。 SMTPクライアントを持つJavaScriptライブラリについては email.js を参照してください。
これがGitHubリポジトリです SMTPクライアント用です。リポジトリのREADMEによると、クライアントのブラウザによってはさまざまなシムやポリフィルが必要になるかもしれませんが、全体としては確かに実行可能に思えます（実際にはあまり達成されていない場合）ここで長い答え.
JavaScriptからEメールを送信するもう1つの方法は、 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はWebブラウザからEメールを送信できません。ただし、すでに実装しようとしているソリューションから戻って、元の要件を満たすものを実行できます。
ページを更新せずにEメールを送信する
JavaScriptを使用してEメールに必要な値を作成してから、実際にEメールを送信するサーバーリソースに対してAJAX要求を行うことができます。 （どのサーバー側の言語/テクノロジを使用しているのか私にはわかりません。その部分はあなた次第です。）
AJAXに慣れていない場合は、Googleですばやく検索すると多くの情報が得られます。一般的には、jQueryの$ .ajax（）関数を使って素早く起動し実行することができます。リクエストで呼び出せるページをサーバーに用意するだけです。
この質問に対する回答を書くには遅すぎると思いますが、それでもjavascriptを使って電子メールを送信しようと考えている人にはこれが役に立つと思います。
私が提案する最初の方法は、サーバー上でこれを行うためにコールバックを使用することです。あなたが本当にそれをジャバスクリプト流行を使って扱われることを望むならば、私はお勧めです。
私が見つけた最も簡単な方法はsmtpJを使うことでした。電子メールを送信するために使用できる無料のライブラリ。
1.以下のようなスクリプトを含めます
<script src="https://smtpjs.com/v3/smtp.js"></script>
あなたはどちらかのようにEメールを送ることができます
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サーバーを持っていないなら、あなたは Elastic Email のようなSMTPリレーサービスを使用します。
また、これは公式の SmtpJS.comウェブサイト へのリンクで、ここにあなたが必要とするすべての例とあなたがあなたの安全なトークンを作ることができる場所を見つけることができます。
誰かがこの詳細が役に立つことを願っています。ハッピーコーディング.
私は SMTPJs library.Itでそれをするでしょう。
簡単に言えば、JavaScriptだけではできないということです。実際にメールを送信するには、SMTPサーバーに接続するためのサーバーサイドハンドラが必要です。このようなPHPのためのものなど、オンラインで多くの簡単なメールスクリプトがあります。
Ajax を使用してPHPスクリプトに要求を送信し、jsを使用して必須フィールドが空でないか正しくないことを確認して、サーバーからの送信者のメール記録を記録します。
function sendMail() is good for doing that.
スクリプトからのメール送信中に発生したエラーを確認し、適切な処置を取ります。
たとえば、メールアドレスが間違っていたり、サーバーの問題でメールが送信されなかったり、そのような状態でキューに入っている場合は、ただちにユーザーに報告し、同じメールを何度も繰り返し送信しないようにしてください。スクリプトから応答を受け取るjQueryのGETおよびPOSTを使用する
$ .get（URL、callback）; $ .post（URL、コールバック）;
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="[email protected]"></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>