Mengirim email dengan Javascript


107

Ini agak membingungkan untuk dijelaskan, jadi bersabarlah dengan saya di sini ...

Saya ingin menyiapkan sistem di mana pengguna dapat mengirim email kerangka melalui situs web saya, kecuali itu sebenarnya tidak dikirim menggunakan server saya - melainkan hanya membuka klien email lokal mereka sendiri dengan email yang siap digunakan. Aplikasi akan mengisi badan email dengan variabel yang telah ditentukan sebelumnya, untuk menghemat pengguna karena harus mengetiknya sendiri. Mereka kemudian dapat mengedit pesan sesuai keinginan, jika tidak sesuai dengan tujuan mereka.

Ada sejumlah alasan mengapa saya ingin email tersebut melalui klien email lokal pengguna, jadi meminta server untuk mengirim email bukanlah suatu pilihan: itu harus 100% sisi klien.

Saya sudah memiliki solusi yang sebagian besar berfungsi, dan saya akan memposting detailnya sebagai jawaban, saya bertanya-tanya apakah ada cara yang lebih baik?


Jawaban:


137

Cara saya melakukannya sekarang pada dasarnya seperti ini:

HTML:

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

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

Ini, yang mengejutkan, bekerja dengan cukup baik. Satu-satunya masalah adalah jika badannya sangat panjang (lebih dari 2000 karakter), maka itu hanya membuka email baru tetapi tidak ada informasi di dalamnya. Saya menduga bahwa ini berkaitan dengan panjang maksimum URL yang terlampaui.


1
Ini adalah cara yang cukup bundar untuk melakukan ini ketika Anda hanya dapat mengatur atribut href ke konten yang sama daripada menggunakan javascript.
Ryan Doherty

1
Bukan bundaran jika ingin memasukkan isi textarea ke dalam email. Juga metode yang bagus untuk menyembunyikan email Anda dari pemanen spam.
Gordon Bell

1
@ Gordon- yang diasumsikan pemanen email tidak regex inline javascript atau mengikuti <script src = "">
alex

6
Gunakan encodeURIComponent dalam preferensi untuk melarikan diri yang mengikuti aturan arbitrer yang berbeda dari penyandiaksaraan URL. Meskipun karakter Unicode masih cenderung gagal ... tetapi semuanya kemungkinan besar akan gagal. link mailto dengan parameter sangat tidak dapat diandalkan dan seharusnya tidak benar-benar digunakan.
bobince

5
bobince: ya saya pikir itu cara yang cerdik untuk melakukannya, tapi apa alternatifnya?
nickf

17

Berikut cara melakukannya menggunakan jQuery dan "elemen" untuk diklik:

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

Kemudian, Anda bisa mendapatkan konten Anda baik dengan memasukkannya dari kolom input (mis. Menggunakan $('#input1').val()atau dengan skrip sisi server dengan $.get('...'). Selamat bersenang-senang


Ini masih tunduk pada batasan ukuran URL, seperti yang disebutkan OP.
Suncat2000

10

Anda tidak memerlukan javascript, Anda hanya perlu href Anda untuk dikodekan seperti ini:

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

Saya kira saya mengharapkan bahwa kode asli mengisi alamat secara dinamis.
tvanfosson

@tvanfosson Jika alamat email diketahui pada halaman pada saat elemen jangkar diklik, Anda dapat mencoba memberi jangkar ID dan mengatur hrefnilainya ketika alamat dipilih. Jika postingan diperlukan untuk mendapatkan alamat email pada saat klik terjadi, ini mungkin tidak akan berhasil.
Micteu

5

Bagaimana dengan memiliki validasi langsung di kotak teks, dan setelah melewati 2000 (atau berapapun ambang batas maksimumnya) maka tampilkan 'Email ini terlalu panjang untuk diselesaikan di browser, tolong <span class="launchEmailClientLink">launch what you have in your email client</span>'

Untuk yang saya miliki

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

dan jQuery ini ke onDomReady Anda

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

5

Anda dapat menggunakan layanan gratis ini: https://www.smtpjs.com

  1. Sertakan skrip:

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

  1. Kirim email menggunakan:
Email.send(
  "from@you.com",
  "to@them.com",
  "This is a subject",
  "this is the body",
  "smtp.yourisp.com",
  "username",
  "password"
);

2
Dengan ini Anda mengekspos data server SMTP Anda, Yang terbaik adalah melakukannya di sisi server dengan Node atau PHP, terima kasih yang sama
jcarlosweb

Sudahkah Anda mencoba tombol "Siapkan server SMTP di sini"? Anda dapat menemukannya di tautan yang dibagikan di jawaban.
jmojico

2

Jika ini hanya akan membuka klien pengguna untuk mengirim email, mengapa tidak membiarkan mereka membuatnya di sana juga. Anda kehilangan kemampuan untuk melacak apa yang mereka kirim, tetapi jika itu tidak penting, maka cukup kumpulkan alamat dan subjek dan munculkan klien untuk membiarkan pengguna mengisi badannya.


1
idenya adalah bahwa lamaran saya memenuhi tubuh untuk mereka. Saya akan mengedit pertanyaan untuk membuatnya lebih jelas ...
nickf

1
Tetapi mengapa menulis klien email ketika Anda hanya akan membukanya untuk mengirim surat?
tvanfosson

ini bukan klien email, ini hanya sebuah halaman di situs web saya yang memuat pesan email.
nickf

2

Masalah dengan idenya adalah bahwa pengguna harus memiliki klien email, yang tidak terjadi jika dia mengandalkan email web, yang merupakan kasus bagi banyak pengguna. (setidaknya tidak ada perubahan untuk mengalihkan ke webmail ini ketika saya menyelidiki masalah ini belasan tahun yang lalu).

Itulah mengapa solusi normal adalah mengandalkan php mail () untuk mengirim email (kemudian, sisi server).

Tetapi jika saat ini "klien email" selalu disetel, secara otomatis, berpotensi menjadi klien webmail, saya akan senang mengetahuinya.


1
> "Tetapi jika saat ini" klien email "selalu disetel, secara otomatis, berpotensi menjadi klien email web, saya akan senang mengetahuinya." ... Ini didukung oleh browser modern, misalnya: support.google.com/a/users/answer/9308783?hl=id
nickf

1

Kirim permintaan ke 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();

Mengapa GET dan bukan POST? jika pesan cukup besar maka akan terpotong di beberapa titik.
Alexey Shevelyov
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.