How to prevent mailto event from opening a new tab in browser

Question

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.

Cuspid

You should add your code which causes the issue and name the browser you are using. – Doublefaced

Answer 1

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

window.location.href = "mailto:[email protected]";
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

Doublefaced

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! – Cuspid

you are leaving the website when using mailto: if, for example, gmail is set as default handler for mailto: protocol. chrome://settings/handlers – Waylay

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

Answer 2

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:[email protected]">').appendTo('body').css("display", "none");

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

Alignment

This seems the most proper solution to me, especially if you want to avoid links with href, as those are crawled by spam bots. – Zenobia

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. – Tiffa

Answer 3

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:[email protected]?subject=Comments about the color blue">Contact Us</a>

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

Theatrician

This is the correct answer, even if it is a "well, duh!" moment. 👍😀 – Thiazole

Answer 4

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

Oxen

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 */} – Turnstile

Answer 5

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

<script>
    myWindow=window.open("mailto:[email protected]");
    myWindow.close();
</script>';

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

Stonyhearted

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. – Pleasure

Answer 6

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

Pisgah

Answer 7

For the record:

create a anchor tag with the target attribute like this:

<div>
    <a target="_self" href="mailto:[email protected];%[email protected]?subject=Mail%20sending&body=etc...">
        Send Mail
    </a>
</div>

Attorneyatlaw

Answer 8

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

Idel

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 – Vitriol