mandar - send email javascript example
Cómo enviar un correo electrónico desde JavaScript (19)
Quiero que mi sitio web tenga la capacidad de enviar un correo electrónico sin actualizar la página. Entonces quiero usar 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" />
Aquí es cómo quiero llamar a la función, pero no estoy seguro de qué poner en la función javascript. De la investigación que he hecho, encontré un ejemplo que usa el método mailto, pero tengo entendido que en realidad no se envía directamente desde el sitio.
Entonces mi pregunta es dónde puedo encontrar qué poner dentro de la función de JavaScript para enviar un correo electrónico directamente desde el sitio web.
function sendMail() {
/* ...code here... */
}
En su función sendMail() , agregue una llamada ajax a su back-end, donde puede implementar esto en el lado del servidor.
Envía un correo electrónico usando JavaScript o 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.'');
}
}
}
Hay un servicio combinado. Puede combinar las soluciones mencionadas anteriormente como mandril con un servicio EmailJS, que puede hacer que el sistema sea más seguro. Aún no han comenzado el servicio.
JavaScript no puede enviar correos electrónicos desde un navegador web. Sin embargo, si se aleja de la solución que ya intentó implementar, puede hacer algo que satisfaga los requisitos originales:
envía un correo electrónico sin refrescar la página
Puede usar JavaScript para construir los valores que necesitará el correo electrónico y luego realizar una solicitud AJAX a un recurso del servidor que realmente envía el correo electrónico. (No sé qué idiomas / tecnologías del lado del servidor estás usando, así que esa parte depende de ti).
Si no está familiarizado con AJAX, una búsqueda rápida en Google le dará mucha información. En general, puedes ponerlo en funcionamiento rápidamente con la función $ .ajax () de jQuery. Solo necesita tener una página en el servidor a la que se pueda llamar en la solicitud.
Javascript es del lado del cliente, no puede enviar un correo electrónico con Javascript. El navegador reconoce tal vez solo mailto: e inicia su cliente de correo predeterminado.
La respuesta corta es que no puedes hacerlo solo con JavaScript. Necesitará un controlador del lado del servidor para conectarse con el servidor SMTP para enviar realmente el correo. Hay muchos scripts de correo simples en línea, como este para PHP:
Use Ajax para enviar solicitudes a la secuencia de comandos de PHP, verifique que el campo requerido no esté vacío o incorrecto usando js y mantenga un registro del envío de correos por parte de su servidor.
function sendMail() is good for doing that.
Compruebe si hay algún error detectado al enviar correos de su secuencia de comandos y tome las medidas adecuadas.
Para resolverlo, por ejemplo, si la dirección de correo es incorrecta o el correo no se envía debido a un problema del servidor o está en cola en tal condición, repórtelo al usuario de inmediato y evite el envío múltiple del mismo correo una y otra vez. Obtenga respuesta de su script Usando jQuery GET y POST
$ .get (URL, devolución de llamada); $ .post (URL, devolución de llamada);
Lo haría con la biblioteca SMTPJs . Ofrece cifrado a sus credenciales, como nombre de usuario, contraseña, etc.
No hay una respuesta directa a su pregunta, ya que no podemos enviar correos electrónicos solo con javascript, pero hay formas de usar Javascript para enviarnos correos electrónicos:
1) usando una API y llamando a la API a través de javascript para enviar el correo electrónico para nosotros, por ejemplo, https://www.emailjs.com dice que puede usar dicho código a continuación para llamar a su API después de alguna configuración:
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) cree un código de back-end para enviar un correo electrónico por usted, puede usar cualquier marco de back-end para que lo haga por usted.
3) usando algo como:
window.open(''mailto:me@http://.com/'');
que abrirá su aplicación de correo electrónico, esto podría entrar en una ventana emergente bloqueada en su navegador.
En general, enviar un correo electrónico es una tarea de servidor, por lo que debe hacerse en lenguajes de backend, pero podemos usar javascript para recopilar la información necesaria y enviarla al servidor o API, también podemos usar la aplicación de terceros parciales y abrirlos a través del navegador usando javascript como se menciona arriba.
No pude encontrar una respuesta que realmente satisficiera la pregunta original.
- Mandrill no es deseable debido a su nueva política de precios, además de que requiere un servicio de back-end si desea mantener sus credenciales seguras.
- A menudo es preferible ocultar su correo electrónico para que no termine en ninguna lista (la solución de correo expone este problema y no es conveniente para la mayoría de los usuarios).
- Es una molestia configurar sendMail o requerir un back-end para enviar un correo electrónico.
Arreglé un sencillo servicio gratuito que le permite realizar una solicitud HTTP POST estándar para enviar un correo electrónico. Se llama PostMail , y simplemente puede publicar un formulario, usar Javascript o jQuery. Cuando se registra, le proporciona un código que puede copiar y pegar en su sitio web. Aquí hay unos ejemplos:
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>
Una vez más, en plena divulgación, creé este servicio porque no pude encontrar una respuesta adecuada.
No puede enviar un correo electrónico directamente con javascript.
Sin embargo, puede abrir el cliente de correo del usuario:
window.open(''mailto:[email protected]'');
También hay algunos parámetros para completar previamente el tema y el cuerpo:
window.open(''mailto:[email protected]?subject=subject&body=body'');
Otra solución sería hacer una llamada ajax a su servidor, para que el servidor envíe el correo electrónico. Tenga cuidado de no permitir que nadie envíe ningún correo electrónico a través de su servidor.
Otra forma de enviar correos electrónicos desde JavaScript es usar directtomx.com de la siguiente manera;
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 );
}
};
Luego llámalo desde tu página de la siguiente manera;
window.onload = function(){
Email.apikey = "-- Your api key ---";
Email.Send("[email protected]","[email protected]","Sent","Worked!");
}
Parece que hay una nueva solución en el horizonte. Se llama EmailJS . Ellos afirman que no se necesita un código de servidor. Puedes solicitar una invitación.
Actualización de agosto de 2016: EmailJS parece estar en vivo. Puede enviar hasta 200 correos electrónicos por mes de forma gratuita y ofrece suscripciones para volúmenes más grandes.
Parece que una ''respuesta'' a esto es implementar un cliente SMPT. Consulte email.js para obtener una biblioteca de JavaScript con un cliente SMTP.
Aquí está el repositorio GitHub para el cliente SMTP. Con base en el README del repositorio, parece que se requieren varias cuñas o rellenos dependiendo del navegador del cliente, pero en general parece ciertamente factible (si no realmente logrado de manera significativa), aunque no de una manera que sea fácilmente descriptable incluso por un motivo razonablemente razonable. larga respuesta aquí.
Puede encontrar qué poner dentro de la función de JavaScript en esta publicación.
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));
}
}
Proporcione su propio script PHP (o cualquier otro idioma) para enviar el correo electrónico.
window.open (''mailto: [email protected]''); como arriba no hace nada para ocultar que la dirección de correo electrónico "[email protected]" sea recolectada por spambots. Solía encontrarme constantemente con este problema.
var recipient="test";
var at = String.fromCharCode(64);
var dotcom="example.com";
var mail="mailto:";
window.open(mail+recipient+at+dotcom);
Te estoy dando la noticia. NO PUEDE enviar un correo electrónico con JavaScript per se.
En función del contexto de la pregunta del OP, mi respuesta anterior ya no es cierta, tal como señaló @KennyEvitt en los comentarios. Parece que puede usar JavaScript como un cliente SMTP .
Sin embargo , no he profundizado para ver si es lo suficientemente seguro y compatible con varios navegadores. Por lo tanto, no puedo alentarlo ni desalentarlo a que lo use. Úselo bajo su propio riesgo.
Indirecta a través de su servidor - Llamar API de terceros - segura y recomendada
Su servidor puede llamar a la API de terceros después de la autenticación y autorización adecuadas. Las claves de API no están expuestas al cliente.
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 );
});
y luego use use $ .ajax en el cliente para llamar a su API de correo electrónico.
Directamente desde el cliente - Llamar API de terceros - no recomendado
Envía un correo electrónico usando solo JavaScript
in short:
1. register for Mandrill to get an API key
2. load jQuery
3. use $.ajax to send an email
Me gusta esto -
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
Nota: Tenga en cuenta que su clave API es visible para cualquier persona, por lo que cualquier usuario malintencionado puede usar su clave para enviar correos electrónicos que pueden consumir su cuota.
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>