Enviando e-mails com Javascript


107

Isso é um pouco confuso de explicar, então tenha paciência comigo aqui ...

Quero configurar um sistema em que um usuário possa enviar e-mails com modelo através do meu site, exceto que não é realmente enviado pelo meu servidor - em vez disso, ele apenas abre seu próprio cliente de e-mail local com um e-mail pronto para ser enviado. O aplicativo preencheria o corpo do e-mail com variáveis ​​predefinidas, para evitar que o usuário tivesse que digitá-lo. Eles podem então editar a mensagem conforme desejado, caso não seja exatamente adequada a seus propósitos.

Há vários motivos pelos quais eu quero que ele vá através do cliente de e-mail local do usuário, então fazer com que o servidor envie o e-mail não é uma opção: tem que ser 100% do lado do cliente.

Já tenho uma solução praticamente funcionando em execução e postarei os detalhes disso como uma resposta, estou me perguntando se há alguma maneira melhor?


Respostas:


137

O que estou fazendo agora é basicamente assim:

O HTML:

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

O 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;
}

Isso, surpreendentemente, funciona muito bem. O único problema é que se o corpo for particularmente longo (algo com mais de 2.000 caracteres), ele apenas abre um novo e-mail, mas não há nenhuma informação nele. Suspeito que tenha a ver com o comprimento máximo do URL sendo excedido.


1
Esta é uma maneira bastante indireta de fazer isso, quando você pode apenas definir o atributo href para o mesmo conteúdo em vez de usar javascript.
Ryan Doherty

1
Não rotear se você quiser incluir o conteúdo da área de texto no e-mail. Também é um bom método para ocultar seu e-mail de coletores de spam.
Gordon Bell

1
@ Gordon- presume-se que o coletor de e-mail não regex inline javascript ou segue <script src = "">
alex

6
Use encodeURIComponent em preferência para escapar, que segue regras arbitrárias diferentes da codificação de URL. Embora os caracteres Unicode provavelmente ainda falhem ... mas é muito provável que a coisa toda falhe de qualquer maneira. Links mailto com parâmetros não são confiáveis ​​e não devem ser usados.
bobince

5
bobince: sim, achei que é uma maneira duvidosa de fazer isso, mas qual é a alternativa?
nickf de

17

Esta é a maneira de fazer isso usando jQuery e um "elemento" para clicar:

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

Em seguida, você pode obter seu conteúdo alimentando-o de campos de entrada (ou seja, usando $('#input1').val()ou por um script do lado do servidor com $.get('...'). Divirta-se


Isso ainda está sujeito a limitações de tamanho de URL, assim como o OP mencionou.
Suncat2000 de

10

Você não precisa de nenhum javascript, você só precisa que seu href seja codificado assim:

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

Acho que esperava que o código real preenchesse os endereços dinamicamente.
tvanfosson

@tvanfosson Se os endereços de e-mail forem conhecidos na página no momento em que o elemento âncora for clicado, você pode tentar dar à âncora um ID e definir seu hrefvalor quando os endereços forem escolhidos. Se uma postagem for necessária para obter os endereços de e-mail no momento em que ocorre o clique, isso provavelmente não funcionaria.
Micteu

5

Que tal ter uma validação ao vivo na caixa de texto e, quando ultrapassar 2.000 (ou qualquer que seja o limite máximo), exibir 'Este e-mail é muito longo para ser preenchido no navegador, por favor <span class="launchEmailClientLink">launch what you have in your email client</span>'

Para o qual eu teria

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

e jQuery isso em seu onDomReady

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

5

Você pode usar este serviço gratuito: https://www.smtpjs.com

  1. Inclua o script:

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

  1. Envie um e-mail usando:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Com isso, você expõe os dados de seu servidor SMTP. É melhor fazer isso no lado do servidor com Node ou PHP, obrigado igualmente
jcarlosweb

Você já tentou o botão "Configurar um servidor SMTP aqui"? Você pode encontrá-lo no link compartilhado na resposta.
jmojico

2

Se isso só vai abrir o cliente do usuário para enviar o e-mail, por que não permitir que ele também o redija lá. Você perde a capacidade de rastrear o que eles estão enviando, mas se isso não for importante, basta coletar os endereços e o assunto e abrir o cliente para permitir que o usuário preencha o corpo.


1
a ideia era que meu aplicativo preenchesse o corpo para eles. Vou editar a pergunta para deixar isso mais claro ...
nickf

1
Mas por que escrever um cliente de e-mail quando você vai abrir um para enviar o e-mail?
tvanfosson

não é um cliente de email, é apenas uma página do meu site que preenche uma mensagem de email.
nickf

2

O problema da própria ideia é que o usuário precisa ter um cliente de e-mail, o que não é o caso se ele depende de webmails, que é o caso de muitos usuários. (pelo menos não houve como redirecionar para este webmail quando investiguei o problema há 12 anos).

É por isso que a solução normal é contar com php mail () para enviar e-mails (servidor, então).

Mas se hoje em dia o "cliente de email" está sempre configurado, automaticamente, potencialmente para um cliente de webmail, ficarei feliz em saber.


> "Mas se hoje em dia" cliente de email "está sempre configurado, automaticamente, potencialmente para um cliente de webmail, ficarei feliz em saber." ... Isso é compatível com navegadores modernos, por exemplo: support.google.com/a/users/answer/9308783?hl=en
nickf

1

Envie uma solicitação para 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 que GET e não POST? se a mensagem for grande o suficiente, ela será truncada em algum ponto.
Alexey Shevelyov
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.