Skip to content

mailto: links with target="_blank" are surprisingly tricky

Published on in JavaScript

Only because Firefox ignores target="_blank" in mailto: links.

Let's say you have an email link that opens in a new tab:

<a href="mailto:hello@example.com" target="_blank">Email me</a>

(I wanted to test how Edge and Safari behave if they have been configured to open a webmail when clicking mailto: links, but configuring this setting in those browsers turned out to be too difficult.[1] smh)

Based on this Stack Overflow answer, I tried this kind of onClick trickery:

<a
  href="mailto:hello@example.com"
  onClick={(event) => {
    event.preventDefault()
    window.open(url.toString(), 'mail')
  }}
  // No `target="_blank"`
>
  Email me
</a>

✅ If Firefox is configured to open a webmail when clicking mailto: links, clicking the link works now correctly: the webmail is opened in a new tab.

But the UX is degraded in all other cases:

  • ❌ Firefox, configured to open mailto: links in an email client: the new empty tab is left open.
  • ❌ Edge: the new empty tab is immediately closed, which is great, but causes some jarring flashing.
  • ❌ Safari: opens a new tab with a confirm dialog: "This website has been blocked from automatically composing an email."
    • Clicking "Allow" opens an email client, but the new empty tab is left open.
    • Clicking "Ignore" leaves the new empty tab open.

I was tempted to check if the user's browser is Firefox, and only then use the onClick trick. But trying to detect the user's browser would open another can of worms.

In the end I ended up doing nothing about this, which sucks for some Firefox users, but I don't know what I could do that wouldn't degrade the UX of any other users. 🤔

Footnotes

  1. I did find instructions how configure Edge to open mailto: links in Gmail, but it would require logging in to Gmail, and I don't want to do that, because Edge is a shitty browser (see e.g. The dark defaults of Microsoft Edge and Edge sends images you view online to Microsoft). I use Edge only for testing and occasionally for some web development. Firefox ftw. ↩