Otevírání mailto odkazů v novém okně

Nedávno jsem tvořil interní systém pro tréninkové deníky na skibila.cz, kde se vypisuje kontakt na závodníky. Po spuštění mi volá trenér:

Když kliknu na email, tak se mi otevře psaní zprávy ve stejném okně. Pak se složitě vracím a blbne to. Používám mail na Seznamu a Mozillu.

V Chrome vše fungovalo v pořádku, ale v Mozille se naprosto ignoroval target="_blank". Hledal jsem na internetu a našel tento bug report. Asi to je ale záměr, protože chování bylo reportováno před léty a změna se nekoná.

Přemluvíme prohlížeč

Nejjednodušší řešení je využít JavaScriptu a funkce open. Ukážeme si jednoduché řešení pomocí onclick, jQuery i čistého JS.

Onclick atribut

Nejrychlejší řešení, pokud máme odkazů málo. Po kliknutí otevřeme nové okno s aktuální adresou a vrátíme false pro ignorování výchozího chování.

<a href="mailto:pavel.kutac@gmail.com"
  onclick="window.open(this.href);return false;">
    Napište mi
</a>

Použití jQuery

Pokud využíváte jQuery na webu, může být velmi výhodné automaticky detekovat mailto odkazy, a pro všechny provést otevření v novém okně.

<a href="mailto:pavel.kutac@gmail.com">Napište mi </a>

$(function(){
  $("a[href^='mailto:']").click(function(e){
    e.preventDefault();
    window.open($(this).attr("href"));
  });
});

Použití čistého JS

HTML bude stejné jako u jQuery varianty. Zde to bude trochu horší s podporou starších prohlížečů, konkrétně IE. Verze 9 nebo novější fungovat budou. V IE8 by querySelectorAll  měl fungovat, ale addEventListener již fungovat nebude.

var links = document.querySelectorAll("a[href^='mailto:']");
  for(i = 0; i < links.length; i++){
    links[i].addEventListener('click',function(e){
      window.open(this.href);
      if(e.preventDefault){
        e.preventDefault();
      }
      e.returnValue = false;
    });
  }

Co na to mobilní zařízení

Protože v telefonech s Androidem se mailto otevře rovnou v aplikaci GMailu, musel jsem vyzkoušet co se stane s novým tabem. Naštěstí stejně rychle jako se otevře se i zavře a zůstane otevřená aplikace GMailu.

Úvodní fotka získána z Freepik