web-dev-qa-db-ja.com

JavaScriptを使用してメールを送信する

これは説明するのが少し混乱するので、ここで私と一緒に耐えてください...

実際にサーバーを使用して送信されるのではなく、ユーザーが自分のWebサイト経由でテンプレート化されたメールを送信できるシステムをセットアップしたいのです。アプリケーションは、メールの本文に事前定義された変数を入力し、ユーザーが自分で入力する必要をなくします。その後、目的に正確に合わない場合は、必要に応じてメッセージを編集できます。

ユーザーのローカルメールクライアント経由で送信する理由はいくつかあります。そのため、サーバーにメールを送信させることは選択肢ではありません。100％クライアント側である必要があります。

私はすでにほとんど動作するソリューションを実行していますが、その答えの詳細を回答として投稿しますが、もっと良い方法があるかどうか疑問に思っていますか？

javascriptemailclient-scripting
101
nickf

私が今それをやっている方法は、基本的に次のようなものです

HTML：

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

Javascript：

function sendMail() {
    var link = "mailto:[email protected]"
             + "[email protected]"
             + "&subject=" + escape("This is my subject")
             + "&body=" + escape(document.getElementById('myText').value)
    ;

    window.location.href = link;
}

これは、驚くべきことに、かなりうまく機能します。唯一の問題は、本文が特に長い場合（2000文字以上）、新しいメールを開くだけで、その中に情報がないことです。 URLの最大長を超えていることに関係していると思われます。

126
nickf

JQueryと「要素」を使用してクリックする方法は次のとおりです。

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

次に、入力フィールドからコンテンツを取得することでコンテンツを取得できます（つまり、$('#input1').val()を使用するか、$.get('...')を使用したサーバー側スクリプトを使用します）。

17
Reignier Julien

Javascriptは必要ありません。hrefを次のようにコーディングするだけです。

<a href="mailto:[email protected]">email me here!</a>
10
Ryan Doherty

この無料サービスを使用できます： https://www.smtpjs.com

  1. スクリプトを含めます。

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

  1. 以下を使用してメールを送信します。

    Email.send("[email protected]", "[email protected]", "This is a subject", "this is the body", "smtp.yourisp.com", "username", "password");

5
cepix

テキストボックスでライブ検証を行い、2000（または最大しきい値）を超えたら、「このメールはブラウザで入力するには長すぎます。<span class="launchEmailClientLink">launch what you have in your email client</span>を入力してください」

私が持っているだろうに

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

これをonDomReadyにjQueryします

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

これでユーザーのクライアントを開いてメールを送信するだけの場合は、そこにメールを作成させてください。送信内容を追跡する機能は失われますが、それが重要でない場合は、アドレスと件名を収集し、クライアントをポップアップして、ユーザーが本文を入力できるようにします。

2
tvanfosson

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][email protected]&message[to][0][email][email protected]&message[subject]=Заявка%20с%207995.by&message[html]=xxxxxx&key=oxddROOvCpKCp6InvVDqiGw', true);
xhttp.send();
1
Vitaly Zdanevich

まさにこのアイデアの問題は、ユーザーが電子メールクライアントを持っている必要があることです。これは、多くのユーザーに当てはまるWebメールに依存している場合には当てはまりません。 （少なくとも十数年前に問題を調査したとき、少なくともこのウェブメールにリダイレクトするためのターンアラウンドはありませんでした）。

だからこそ、通常の解決策はphp mail（）を使用して電子メールを送信することです（サーバー側）。

しかし、最近「電子メールクライアント」が常に潜在的にWebメールクライアントに自動的に設定される場合は、喜んでお知らせします。

1
Fabrice NEYRET