42

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)

4
  • 1
    "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.
    – evan
    Dec 18, 2011 at 4:42
  • the page to sent email, either gmail, yahoo, etc
    – shennyL
    Dec 18, 2011 at 4:45
  • 1
    This is not possible. Sorry.
    – jamieb
    Dec 18, 2011 at 4:46
  • This can now be done by adding target="_blank" rel="noopener noreferrer" in modern browsers. See this CSS Tricks article for more details. Mar 8, 2022 at 17:04

9 Answers 9

52

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.

1
  • 42
    Up-voted for the line "especially since they are Outlook users". Oct 25, 2018 at 13:41
43

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.

8
  • 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? Feb 25, 2015 at 15:12
  • 2
    Just for the history it is 8 months later and the bug still exists.
    – Leonidas
    Mar 30, 2015 at 12:32
  • 4
    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
    – Costa
    Feb 19, 2016 at 7:18
  • 4
    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
    – Costa
    Jan 6, 2017 at 21:29
  • 2
    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.
    – Costa
    May 1, 2021 at 22:11
25

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://stackoverflow.com/a/9880404/1107020

Guess that's all.

Greetings, Marcos.

1
  • 1
    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 Aug 11, 2023 at 3:07
16

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.

6
  • 30
    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. Jan 21, 2014 at 16:04
  • 1
    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.
    – Scott
    Jan 21, 2014 at 16:53
  • 3
    This answer is outdated, some mail clients open in tabs such as gmail or inbox May 20, 2016 at 13:41
  • 1
    @scott "mailto calls the users default email client. It does not open a window or tab in any instance." Is that part outdated? Nov 28, 2016 at 21:01
  • 1
    @MattMacLeod No. It is not outdated. Mailto still merely calls the users default email client.
    – Scott
    Nov 28, 2016 at 21:43
4

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);

3

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

3
  • This is being used in production at my work without issues for google chrome, I haven't checked other browsers Jun 14, 2018 at 21:06
  • confirmed latest firefox. I'm on linux, so can't test IE Jun 14, 2018 at 21:22
  • 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!
    – Henrik
    Aug 27, 2018 at 9:06
1

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.)

1
  • a vote for "middle click" - WTF firefox?
    – Steve
    Mar 29, 2023 at 6:10
1

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

2
  • Inline handlers are quite bad practice - consider attaching handlers properly using Javascript instead. Jul 22, 2018 at 5:33
  • I made another option
    – Botyk
    Jul 22, 2018 at 6:09
-3

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.