34

I am using a mailto: filled in JavaScript to send information throughout my web application, but everytime a user presses the Send button, it opens a new tab in the browser before opening the mailing application (Outlook, Gmail, etc).

Is there any way to prevent the blank tab from opening?

Edit: This issue is encountered in all following major browsers : Internet Explorer, Firefox and Google Chrome.

I am using window.open() to send emails, is there any known alternatives?

Here is how I send the email:

var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message;
var win = window.open(mailto_link,'emailWindow');

I don't want to use window.location.href since I am displaying a message after the user sent the email.

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66

8 Answers8

30

Thank you for the edit. There is indeed an alternative:

window.location.href = "mailto:mail@domain.tld";
alert("Thank you!");

I don't want to use window.location.href since I am displaying a message after the user sent the email.

I did not really get this one. You are not leaving the website when using mailto: with window.location.href

AmShaegar
  • 1,491
  • 9
  • 18
  • 1
    Thank you for your contribution and your latest edit! I had not actualy tested the `href` property with a `mailto:` URI. This works just as intended! – Jeff Noel Nov 19 '12 at 16:34
  • 10
    you are leaving the website when using `mailto:` if, for example, gmail is set as default handler for `mailto:` protocol. chrome://settings/handlers – Joe B Jul 08 '14 at 23:01
  • 2
    Also, this doesn't work properly on Firefox. If you have a websocket connection open, firefox will instantly kill it when you do this (even though the page does not navigate). – CpnCrunch Feb 03 '17 at 22:28
9

The window.location.href solution by AmShaegar works pretty well but it caused side effect in a complex application I have been developping.

I finally came up with this solution one might be interested in:

$('<iframe src="mailto:mail@domain.tld">').appendTo('body').css("display", "none");

See this plunker: http://plnkr.co/edit/J0LvQU?p=preview

Guillaume
  • 277
  • 5
  • 15
  • 2
    This seems the most proper solution to me, especially if you want to avoid links with `href`, as those are crawled by spam bots. – peter_the_oak Sep 10 '15 at 13:52
  • 3
    Worth noting. In chrome, if the site is on https, it will block the created iframe as mixed content, which causes the mailto to never fire. – Kyle Hawk Mar 30 '17 at 15:11
5

The blank tab is opened by window.open(). You don't need that.

The syntax for a mailto link should be something like

<a href="mailto:your@email.address?subject=Comments about the color blue">Contact Us</a>

See http://www.addressmunger.com/mailto_syntax_tutorial/ for more details.

Samuel Rossille
  • 18,940
  • 18
  • 62
  • 90
5

Just close the window after a short interval:

var mailto_link = 'mailto:'+email+'?subject='+subject+'&body='+body_message;
var win = window.open(mailto_link,'emailWindow');
setTimeout(function() { win.close() }, 500);
CpnCrunch
  • 4,831
  • 1
  • 33
  • 31
  • 1
    I think @CpnCrunch's answer is correct but not complete. If the user is viewing email in the same browser, the new window should remain open. Only if they are viewing in an external email application should the new window be closed. We may be able to check that the new window is about:blank only if it is blank, due to cross-site browser restrictions. I got around this by wrapping win.close() in a check like this: `try { if (myWindow.location.href === 'about:blank') { myWindow.close(); }} catch (Error) {/* do nothing */}` – Tom Anderson Jul 22 '19 at 03:02
3

Try naming the window (myWindow) and adding a close() command:

<script>
    myWindow=window.open("mailto:emailaddress@example.com");
    myWindow.close();
</script>';

This should close the extra browser window and keep the email application open. At least it worked for me.

TarranJones
  • 4,084
  • 2
  • 38
  • 55
ezChx
  • 4,024
  • 1
  • 19
  • 16
  • Does it work for slow machines too? I could imagine that the window closes too fast for the browser to respond to the mailto link. – AmazingTurtle Jan 17 '17 at 08:41
0

No, that strictly depends on how your browser handles new tabs. I've spent hours looking for a work around, solution, anything...

firefox: options -> tabs

safari: preferences -> tabs

Andrei Cristian Prodan
  • 1,114
  • 4
  • 17
  • 34
0

For the record:

create a anchor tag with the target attribute like this:

<div>
    <a target="_self" href="mailto:mail1@domain1.com;%20mail2@domain2.com?subject=Mail%20sending&body=etc...">
        Send Mail
    </a>
</div>
LeandroP
  • 337
  • 2
  • 8
0
<a className="prom-links-anchor" tabIndex="0" aria-label="Email" href={ "mailto:" + eid + "@yahoo.com"}   
   role="link" nocm="true" title={ "Email"} rel="email" data-cs={contentSource} data={resultPosition + 1} 
   onMouseDown={this.handleMouseDown.bind(this)} onKeyDown={this.handleKeyPressEvent.bind(this)} 
   onContextMenu={e=> e.preventDefault()}
  >
  <div className="icon-email" title="Email" href={"mailto:" + eid + "@yahoo.com"} rel="email" 
       data-cs={contentSource} data={resultPosition + 1} />
  <div className="icon-label-email" aria-hidden="true" href={"mailto:" + eid + "@yahoo.com"} 
       title={"Email"} rel="hc-email" data-cs={contentSource} data={resultPosition + 1}
    >Email</div>
</a>
barbsan
  • 3,418
  • 11
  • 21
  • 28
Laarni Cortez
  • 21
  • 4
  • You have to indent code properly, html becomes invisible otherwise. [edit] your answer and add some explanation why/how does this code solve the issue from question – barbsan Jan 24 '19 at 07:38