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:[e-mail]" 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)

Answer 1

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:[e-mail]', 'mail');event.preventDefault()" href="mailto:[e-mail]">Send a e-mail</a>

http://jsfiddle.net/cNUNP/

Credit to https://stackoverflow.com/a/9880404/1107020

Guess that's all.

Greetings, Marcos.

Answer 2

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:[e-mail]">

If nothing pops up click.....<a href="mailto:[e-mail]">Mail!</a>

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

Answer 3

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="[e-mail]">[e-mail] </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.)

Answer 4

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

<a href="mailto:[e-mail]" 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.

Answer 5

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

Answer 6

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('[e-mail]', 'Subject', 'Body');event.preventDefault()">[e-mail]</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:[e-mail]?subject=Subject&body=Body" onclick="mailto(this);event.preventDefault()">[e-mail]</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:[e-mail]?subject=Subject&body=Body" id="mailto">[e-mail]</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:[e-mail]?subject=Subject&body=Body" target="_blank">[e-mail]</a>

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