87

I'd like to invoke a mailto link from JavaScript - that is I'd like a method that allows me to open the email client on the users PC, exactly as if they had clicked on a normal mailto link.

How can I do this?

Justin
  • 84,773
  • 49
  • 224
  • 367

6 Answers6

150

You can use window.location.href here, like this:

window.location.href = "mailto:address@dmail.com";
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 4
    and how would I append a body? mailto:address@dmail.com?body=myBody and mailto:address@dmail.com&myBody do not work for me... – Max Nov 19 '11 at 09:40
  • @jipiboily, can you please explain more? Which browser have you tried and it didn't work? – Adi Nov 19 '12 at 17:23
  • @Adnan from what I remember it doesn't work with Opera and maybe more browsers. Depending on your needs, you might be able to workaround that problem. – jipiboily Nov 19 '12 at 20:21
  • @Rolf I just tested in the latest chrome stable, still working. – Nick Craver Jul 19 '13 at 16:41
  • Can it be done without openning a new tab or changing any window visible content: window.location.href = "tel:+4812345"; ? – Yoda Sep 06 '14 at 19:42
  • 11
    Max, you have likely figured this out, but for future readers: `window.location.href = 'mailto:address@dmail.com&subject=Hello there&body=This is the body';`. Not `?` and not `&`, just `&` – cssyphus Dec 16 '15 at 00:05
10

You can avoid the blank page issue discussed above by instead using .click() with a link on the page:

document.getElementById('mymailto').click();
...
<a href="mailto:...." id="mymailto" style="display:none"></a>
franzo
  • 1,379
  • 1
  • 15
  • 30
  • I tried this: ` function Call(){ document.getElementById('mymailto').click(); } ` and the new tab still opens. – Yoda Sep 06 '14 at 19:49
6

the working answer for me, tested in chrome, IE and firefox together with outlook was this

window.location.href = 'mailto:address@dmail.com?subject=Hello there&body=This is the body';

%0d%0a is the new line symbol of the email body in a mailto link

%20 is the space symbol that should be used, but it worked for me as well with normal space

Toskan
  • 13,911
  • 14
  • 95
  • 185
3

Better to use

window.open('mailto:address@mail.com?subject=sub&body=this is body')

If we use window.location.href chrome browser is having error in network tab with Provisional headers are shown Upgrade-Insecure-Requests: 1

Prabin Tp
  • 758
  • 6
  • 15
1

Actually, there is a possibillity to avoid the empty page.

I found out, you can simply insert an iframe with the mailto link into the dom. This works on current Firefox/Chrome and IE (also IE will display a short confirm dialog).

Using jQuery, I got this:

var initMailtoButton = function()
{
    var iframe = $('<iframe id="mailtoFrame" src="mailto:name@domain.com" width="1" height="1" border="0" frameborder="0"></iframe>');
    var button = $('#mailtoMessageSend');    
    if (button.length > 0) {            
        button.click(function(){
            // create the iframe
            $('body').append(iframe);
            //remove the iframe, we don't need it any more
            window.setTimeout(function(){
                iframe.remove();    
            }, 500);

        });
    }
}
s34n
  • 11
  • 4
1

This is an old question, but I combined several Stack Overflows to come up with this function:

//this.MailTo is an array of Email addresses
//this.MailSubject is a free text (unsafe) Subject text input
//this.MailBody is a free text (unsafe) Body input (textarea)
//SpawnMail will URL encode /n, ", and ', append an anchor element with the mailto, and click it to spawn the mail in the users default mail program
SpawnMail: function(){
    $("#MyMailTo").remove();
    var MailList="";
    for(i in this.MailTo)
        MailList+=this.MailTo[i]+";";
    var NewSubject=this.MailSubject.replace(/\n/g, "%0d%0a");
    NewSubject=NewSubject.replace(/"/g, "%22");
    NewSubject=NewSubject.replace(/'/g, "%27");
    var NewBody=this.MailBody.replace(/\n/g, "%0d%0a");
    NewBody=NewBody.replace(/"/g, "%22");
    NewBody=NewBody.replace(/'/g, "%27");
    $("#mainNavBar").after("<a id='MyMailTo' style='display:none;' href='mailto:"+MailList+"?subject="+NewSubject+"&body="+NewBody+"'>&nbsp;</a>");
    document.getElementById('MyMailTo').click();
}

The cool part about this (and how I plan to use it) is I can put this in a loop and split out individual messages to everyone in the array or keep everyone together (which is what this function currently does). Anyway thanks for the tip @Toskan

FOLLOW-UP - Please note the new HTML5 standard does not allow looping mailto (or other pop-up related js) without a "required user gesture". Cool article here: https://github.com/WICG/interventions/issues/12 So you can't use this to mass generate individual e-mails, but it does work well with sending to many in it's current design.

Bryce Rakop
  • 146
  • 7