Invoke / click a mailto link with JQuery / JavaScript

JavascriptJqueryMailto

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

window.location.href = "mailto:[email protected]";

Solution 2 - Javascript

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>

Solution 3 - Javascript

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

window.location.href = 'mailto:[email protected]?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

Solution 4 - Javascript

Better to use

window.open('mailto:[email protected]?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

Solution 5 - Javascript

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:[email protected]" 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);
            
        });
    }
}

Solution 6 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJustinView Question on Stackoverflow
Solution 1 - JavascriptNick CraverView Answer on Stackoverflow
Solution 2 - JavascriptfranzoView Answer on Stackoverflow
Solution 3 - JavascriptToskanView Answer on Stackoverflow
Solution 4 - JavascriptPrabin TpView Answer on Stackoverflow
Solution 5 - Javascripts34nView Answer on Stackoverflow
Solution 6 - JavascriptBryce RakopView Answer on Stackoverflow