Envío de correos electrónicos con Javascript


107

Esto es un poco confuso de explicar, así que tengan paciencia conmigo ...

Quiero configurar un sistema en el que un usuario pueda enviar correos electrónicos con plantillas a través de mi sitio web, excepto que en realidad no se envía a través de mi servidor, sino que abre su propio cliente de correo local con un correo electrónico listo para usar. La aplicación llenaría el cuerpo del correo electrónico con variables predefinidas, para evitar que el usuario tenga que escribirlo él mismo. Luego, pueden editar el mensaje como lo deseen, en caso de que no se adapte exactamente a sus propósitos.

Hay varias razones por las que quiero que vaya a través del cliente de correo local del usuario, por lo que hacer que el servidor envíe el correo electrónico no es una opción: tiene que ser 100% del lado del cliente.

Ya tengo una solución que funciona en su mayor parte y publicaré los detalles de eso como respuesta, me pregunto si hay alguna manera mejor.


Respuestas:


137

La forma en que lo estoy haciendo ahora es básicamente así:

El HTML:

<textarea id="myText">
    Lorem ipsum...
</textarea>
<button onclick="sendMail(); return false">Send</button>

El Javascript:

function sendMail() {
    var link = "mailto:me@example.com"
             + "?cc=myCCaddress@example.com"
             + "&subject=" + encodeURIComponent("This is my subject")
             + "&body=" + encodeURIComponent(document.getElementById('myText').value)
    ;
    
    window.location.href = link;
}

Esto, sorprendentemente, funciona bastante bien. El único problema es que si el cuerpo es particularmente largo (en algún lugar de más de 2000 caracteres), simplemente abre un nuevo correo electrónico, pero no contiene información. Sospecho que tendría que ver con que se exceda la longitud máxima de la URL.


1
Esta es una forma bastante indirecta de hacer esto cuando puede simplemente establecer el atributo href en el mismo contenido en lugar de usar javascript.
Ryan Doherty

1
No es indirecto si desea incluir el contenido del área de texto en el correo electrónico. También es un buen método para ocultar su correo electrónico de los recolectores de spam.
Gordon Bell

1
@ Gordon- que se asume que el recolector de correo electrónico no regex inline javascript o sigue <script src = "">
alex

6
Utilice encodeURIComponent de preferencia para escapar, que sigue reglas arbitrarias diferentes de la codificación de URL. Aunque es probable que los caracteres Unicode fallen ... pero es muy probable que todo falle de todos modos. Los enlaces de mailto con parámetros son muy poco fiables y no deberían utilizarse.
Bobince el

5
Bobince: Sí, pensé que era una forma poco fiable de hacerlo, pero ¿cuál es la alternativa?
nickf

17

Esta es la forma de hacerlo usando jQuery y un "elemento" para hacer clic:

$('#element').click(function(){
    $(location).attr('href', 'mailto:?subject='
                             + encodeURIComponent("This is my subject")
                             + "&body=" 
                             + encodeURIComponent("This is my body")
    );
});

Luego, puede obtener su contenido alimentándolo desde los campos de entrada (es decir, usando $('#input1').val()o mediante un script del lado del servidor con $.get('...'). Diviértase


Esto todavía está sujeto a limitaciones de tamaño de URL, tal como lo ha mencionado el OP.
Suncat2000

10

No necesita ningún javascript, solo necesita que su href esté codificado de esta manera:

<a href="mailto:me@me.com">email me here!</a>

Supongo que esperaba que el código real completara las direcciones de forma dinámica.
tvanfosson

@tvanfosson Si las direcciones de correo electrónico se conocen en la página en el momento en que se hace clic en el elemento de anclaje, puede intentar darle al ancla una ID y establecer su hrefvalor cuando se eligen las direcciones. Si se necesita una publicación para obtener las direcciones de correo electrónico en el momento en que ocurre el clic, esto probablemente no funcionaría.
Micteu

5

¿Qué hay de tener una validación en vivo en el cuadro de texto, y una vez que supere los 2000 (o cualquiera que sea el umbral máximo), muestre 'Este correo electrónico es demasiado largo para completarlo en el navegador, por favor <span class="launchEmailClientLink">launch what you have in your email client</span>'

A lo que tendría

.launchEmailClientLink {
cursor: pointer;
color: #00F;
}

y jQuery esto en su onDomReady

$('.launchEmailClientLink').bind('click',sendMail);

5

Puede utilizar este servicio gratuito: https://www.smtpjs.com

  1. Incluya el guión:

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

  1. Envíe un correo electrónico usando:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Con esto expones los datos de tu servidor SMTP, lo mejor es hacerlo del lado del servidor con Node o PHP, gracias igualmente
jcarlosweb

¿Ha probado el botón "Configurar un servidor SMTP aquí"? Puede encontrarlo en el enlace compartido en la respuesta.
jmojico

2

Si esto solo va a abrir el cliente del usuario para enviar el correo electrónico, ¿por qué no dejar que ellos también lo redacten allí? Pierde la capacidad de rastrear lo que están enviando, pero si eso no es importante, simplemente recopile las direcciones y el asunto y muestre el cliente para permitir que el usuario complete el cuerpo.


1
la idea era que mi solicitud llenara el cuerpo para ellos.
Editaré

1
Pero, ¿por qué escribir un cliente de correo electrónico cuando solo va a abrir uno para enviar el correo?
tvanfosson

no es un cliente de correo electrónico, es solo una página de mi sitio web que rellena previamente un mensaje de correo electrónico.
nickf

2

El problema con la idea misma es que el usuario tiene que tener un cliente de correo electrónico, lo que no es el caso si se basa en los correos web, que es el caso de muchos usuarios. (al menos no hubo vuelta atrás para redirigir a este correo web cuando investigué el problema hace una docena de años).

Es por eso que la solución normal es confiar en php mail () para enviar correos electrónicos (del lado del servidor, entonces).

Pero si hoy en día el "cliente de correo electrónico" siempre está configurado, automáticamente, potencialmente para un cliente de correo web, estaré feliz de saberlo.


> "Pero si hoy en día el" cliente de correo electrónico "siempre está configurado, automáticamente, potencialmente para un cliente de correo web, estaré feliz de saberlo". ... Esto es compatible con los navegadores modernos, por ejemplo: support.google.com/a/users/answer/9308783?hl=en
nickf

1

Enviar solicitud a mandrillapp.com :

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        console.log(xhttp.responseText);
    }
}
xhttp.open('GET', 'https://mandrillapp.com/api/1.0/messages/send.json?message[from_email]=mail@7995.by&message[to][0][email]=zdanevich.vitaly@yaa.ru&message[subject]=Заявка%20с%207995.by&message[html]=xxxxxx&key=oxddROOvCpKCp6InvVDqiGw', true);
xhttp.send();

¿Por qué OBTENER y no PUBLICAR? si el mensaje es lo suficientemente grande, se truncará en algún momento.
Alexey Shevelyov
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.