How to Create a Mailto Share Button that Opens a W

Question

I've been searching all over the internet to find out how to create a mailto share button that opens up a new window in which the user can then type in the email address of his choice to send to. I've an attached a sequential set of images as operational example:

What is the trick to this? Why can't I find any info on how to write such code ....absolutely nowhere on Stack Overflow either!

As of right now this is the code that I have:

 $('.share-page-on-Email').click(function() {
  window.open("mailto:"+emailTo+'?cc='+emailCC+'&subject='+emailSub+'&body='+emailBody, '_self');
   });

View my prototype Email share button at my Code Pen here: https://codepen.io/IDCoder/full/rpdBQJ/

Thanks in advance for your help!

Answer 1

You can use navigator.registerProtocolHandler() to set specific domains to handle specific protocols as demonstrated by @PaulIrish at Getting Gmail to handle all mailto: links with registerProtocolHandler.

.registerProtocolHandler() must be called at the origin where the protocol is to be handled by the web application, else an error occurs.

User agents must throw a "SecurityError" DOMException if the resulting URL record has an origin that differs from the origin specified by the relevant settings object of this NavigatorContentUtils object.

For example, you can navigate to "https ://mail.google.com/mail/#inbox", then at console

navigator.registerProtocolHandler("mailto",
                                  "https://mail.google.com/mail/?extsrc=mailto&url=%s",
                                  "Gmail");

var email = `<a href="mailto:[e-mail]?subject=registerProtocolHandler()%20FTW!&amp;body=Check%20out%20what%20I%20learned%20at%20http%3A%2F%2Fupdates.html5rocks.com%2F2012%2F02%2FGetting-Gmail-to-handle-all-mailto-links-with-registerProtocolHandler%0A%0APlus%2C%20flawless%20handling%20of%20the%20subject%20and%20body%20parameters.%20Bonus%20from%20RFC%202368!" target="_blank">this mailto: link</a>`;

document.body.insertAdjacentHTML("beforeend", email);

document.body.querySelector("a[href^=mailto]:nth-last-of-type(1)").click();

which should launch a window having title "Compose Mail", with Subject and Body populated.

To include "cc" you can place

cc=[e-mail]& 

within the string following last

&

on the

?subject=

line, see mailto with multiple cc addresses.

Or write the service for your own online email application to achieve the same handling of requests for specific protocols.

Answer 2

You can use window.location.href like this:

window.location.href = 'mailto:[e-mail]'

Answer 3

I recommend never using that mailto: feature as it behaves unpredictably, different on different devices and sometimes fails alltogether. You could create a page just to take the email string then do whatever you want with it server side. Make the popup/popover small like:

<a href="/my-email-collector-page"
   onclick="window.open(this.href,'targetWindow',
                                   'toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=yes,
                                    resizable=yes,
                                    width=200px,
                                    height=120px');
 return false;">email</a>