Open the href mailto link in new tab / window

Question

I have an image which when click, I want to link to a mailto:

 <a id="mailto" href="mailto:[email protected]" target="_newtab" >
        <img src="@Url.Content("~/Content/HomePage/email.png")" alt="email" /></a>

However, currently once its clicked, it will launch the email option to choose a mailto application, and once i choose, the mailto link is open in the current tab. This will cause user to leave the application.

So, I want the page to sent email (by gmail, yahoo, etc ) is either open in new tab or in a window. Any idea how to do this? I tried both target="_newtab" and target="_blank" but both didn't work.

Any help will be much appreciated.. Thanks...

(jQuery method is also acceptable if there is no other way, thanks)

Franckot

"I want the mailto link to either open in new tab or in a window" - what exactly do you expect to appear in this new tab or window? Please be as specific as you possibly can. – Tother

the page to sent email, either gmail, yahoo, etc – Franckot

This is not possible. Sorry. – Clipfed

This can now be done by adding target="_blank" rel="noopener noreferrer" in modern browsers. See this CSS Tricks article for more details. – Phototransistor

Answer 1

mailto calls the users default email client. It does not open a window or tab in any instance. If you want to use a window or tab you need to configure a form and allow the form to open in your window/tab. Of course, you'll have to configure the form to send mail with whatever method is available on your server.

Tricuspid

This may have been true in 2011, but it is not true anymore. You can open mail clients such as Gmail in a new tab using target="_blank". Unfortunately, that is not sufficient since it will launch a blank tab for folks using stand alone clients. – Kaiserslautern

And how do you open Outlook (the most popular email client) in a tab? It's always been possible open web-based email services in a window or tab. But web-based email services are not the majority of email clients. – Tricuspid

This answer is outdated, some mail clients open in tabs such as gmail or inbox – Broomstick

@MattMacLeod the #1 email client in use is Outlook. As stated, while you certainly can set a link to open a new tab or window... that will not work with the #1 client today. This answer is not outdated. – Tricuspid

@scott "mailto calls the users default email client. It does not open a window or tab in any instance." Is that part outdated? – Broomstick

@MattMacLeod No. It is not outdated. Mailto still merely calls the users default email client. – Tricuspid

Answer 2

this information is outdated, now it is possible to do so i believe, since gmail and others now work via browser links. there is however the problem that you would only want it to open in a new tab if NOT opening in a system mail client, and open in a new tab if it is a webmail client, otherwise for example Outlook users see a blank tab appear, which is disorienting, especially since they are Outlook users.

Eidson

Up-voted for the line "especially since they are Outlook users". – Manlove

Answer 3

You don't need Javascript/Jquery for this. A standard link works (except Firefox v30+ due to a bug, see below).

<a href="mailto:[email protected]" target="_blank">

As of Firefox 30, does not work in Firefox due to a bug. It opens in the same tab AND replaces history so hitting back will not bring you back to the page where the mailto: link was.

Telegram

This is correct. I am trying to find a solution. _blank does exactly what Costa says. How can we circumvent and open the gmail page in a new tab or possibly a pop up javascript window? – Audre

Just for the history it is 8 months later and the bug still exists. – Precis

2016 update: bug is still not fixed. Was originally opened in 2011 so doubtful this will be fixed unless the bug gets a ton of upvotes (hint, hint): bugzilla.mozilla.org/show_bug.cgi?id=646552 – Telegram

2017 update: bug is still not fixed. I will most likely never be fixed without lots of upvotes: bugzilla.mozilla.org/show_bug.cgi?id=646552 – Telegram

2021 update: This 10-year old Firefox bug is still not fixed. There are some very recent discussions in the bug tracker so maybe hope is not lost. – Telegram

Man this bug is still open. Thanks for sharing the link to bugzilla. I was confused why it wouldn't open in new tab despite target blank. – Korea

2022 still not fixed lol... – Impetrate

For anyone else coming across this and hoping for a fix sometime this decade, don't just navigate away and pray it gets fixed - register your frustration by following through the link above, creating a quick account on Bugzilla and upvoting the bug report (located under the Details accordion item). Alternatively, if anyone knows how exactly to fix the bug, feel free to submit a patch, although at this point I'm not even sure whether the devs would be open to accepting one. – Binary

Answer 4

This answer is based on this answer Open the href mailto link in new tab / window.

Right now, new browsers support some web mail interfaces (Like Gmail, Yahoo Mail, AoL, etc.).

So we can simply open a new window (Support older browser, new browsers just will open a new tab) and add a fallback (In case of non-javascript user) using preventDefault and default link redirection.

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

https://developer.mozilla.org/es/docs/DOM/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/Window.open

Like so:

<a onClick="javascript:window.open('mailto:[email protected]', 'mail');event.preventDefault()" href="mailto:[email protected]">Send a e-mail</a>

http://jsfiddle.net/cNUNP/

Credit to https://mcmap.net/q/378029/-open-the-href-mailto-link-in-new-tab-window

Guess that's all.

Greetings, Marcos.

Exemption

just as fyi, using a desktop email client: Firefox opens the new email in my desktop email client, but also has an new empty tab; Safari opens a new tab with a warning to be confirmed before opening a new email in the desktop client; Chromium based browsers seem to close the new empty tab after handing the email handling over to the desktop client – Louque

Answer 5

Can confirm that '_blank' is still not working in Firefox for an emailto link. Instead use an onClick function that will do something like this:

window.open('mailto:'+email+'?subject='+subject);

Circulate

Answer 6

I know this is an old question, but this thread had the best set of answers if found. I modified Marcos's Answer above to also close the blank tab that is created if the client has an external mail handler

reference answer

JS (w\ jQuery for event handlers)

$(document).on('click', 'a[href^=mailto]', function(e) {
  var checkClose, checkLoaded, event, href, i, len, loadEvents, results, t, wndw;
  e.preventDefault();
  href = this.href;
  wndw = window.open(href, 'mail');
  checkClose = function() {
    console.log('checkClose');
    try {
      wndw.location.href;
      return wndw.close();
    } catch (error) {
      return console.log('webmail');
    }
  };
  t = setTimeout(checkClose, 5000);
  try {
    checkLoaded = function() {
      console.log('loaded');
      clearTimeout(t);
      return t = setTimeout(checkClose, 2000);
    };
    wndw.onload = checkLoaded;
    loadEvents = ["DomContentLoaded", "load", "beforeunload", "unload"];
    results = [];
    for (i = 0, len = loadEvents.length; i < len; i++) {
      event = loadEvents[i];
      results.push(wndw.addEventListener(event, checkLoaded));
    }
    return results;
  } catch (error) {
    return checkLoaded();
  }
});

jsfiddle

Hadden

This is being used in production at my work without issues for google chrome, I haven't checked other browsers – Hadden

confirmed latest firefox. I'm on linux, so can't test IE – Hadden

Thanks @Sampson-Crowley! I can confirm this to be working in IE (11) and Chrome (68). With Chrome setup correctly as default and with account it opens as web client. With email client setup instead it works as well. In some scenario I could get an empty tab (cannot recreate) but that closed automatically as expected from code. Also tested in Android that goes into Gmail there. Thanks for sharing! – Goings

Answer 7

Have you tried 'middle-click' ( "Open in new tab" ) ? It works for me

(http://forums.mozillazine.org/viewtopic.php?f=7&t=1842595)

although it seems particularly strange to ask user to Middle click

Anyway I've found a pseudo solution that seems to work in FF 25/ Chrome 35

1.- Set up your link something like this:

<a href="javascript:void()"
 class="mailToLink" 
data-mail="[email protected]">[email protected] </a>

2.- Using javascript ( with jquery in the example) setup an onlclick event like:

    $('.mailToLink').on('click', function(){
        mailto=$(this).data('mail');
        w=window.open('','_blank','',true);
        w.location.href='mailto:'+mailto;
        w.focus();
    });

This opens a blank new window/tab and later changes its location, so the mail protocol handler is unable toto act until the new window is already opened

Not tested with Local mail client ( Outlook et al.)

Refractory

a vote for "middle click" - WTF firefox? – Isotropic

Answer 8

Variant 1 (JavaScript):

<script>
// Open mailto links in a new tab
function mailto(email, subject, body) {
    var url;
    url = 'mailto:' + email;
    url += '?subject=' + subject;
    url += '&body=' + body;
    window.open(url);
}
</script>

<a href="#" onclick="mailto('[email protected]', 'Subject', 'Body');event.preventDefault()">[email protected]</a>

Variant 2 (JavaScript):

<script>
// Open mailto links in a new tab
function mailto(th) {
    var url = th.getAttribute('href');
    window.open(url);
}
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" onclick="mailto(this);event.preventDefault()">[email protected]</a>

Variant 3 (jQuery):

<script>
// Open mailto links in a new tab
$('#mailto').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    window.open(url);
});
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" id="mailto">[email protected]</a>

Variant 4 (jQuery):

<script>
// Open mailto links in a new tab
$("a[href^='mailto:']").click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var target = $(this).attr('target');
    window.open(href, target ? target : '_self');
});
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" target="_blank">[email protected]</a>

HTML target Attribute: https://www.w3schools.com/tags/att_a_target.asp

Bryozoan

Inline handlers are quite bad practice - consider attaching handlers properly using Javascript instead. – Sticker

I made another option – Bryozoan

Answer 9

There is a cheap html-hack to this problem.....

The link on one page...

<a href="/mailto.html" target="_blank">Mail</a>

On mailto.html....

<meta HTTP-EQUIV="REFRESH" content="0; url=mailto:[email protected]">

If nothing pops up click.....<a href="mailto:[email protected]">Mail!</a>

_blank opens a new tab/window and the metatag does the rest. link as fallback offcourse.

Astrolabe