Dealing with mailto-links if no mail client is available

When a user clicks on a link containing a mailto-link, the web-browser should open up the default mail client, as determined by the operating system. However, these days, users more often use web-based mail clients, such as Gmail or Live Mail. This means there is no default mail client present in the operating system, or at least not a configured one. This is especially the case for the Windows 7 and below, which does not come with a mail client installed. The problem is that, if the user has no mail client installed, the browser does not know what to do with a mailto-link.

One of our clients uses a mailto-link for their platform visitors to be able to directly contact other users on their platform. They received some complaints about this link not working for some users. After finding out their exact system configuration, it appeared these users use Chrome as their browser, and Gmail as their email client. Gmail offers Chrome the ability to open mailto-links in a new tab, directly in the Gmail web interface, but this is a setting that is easily ignored, as was the case for this user.

We had to come up with a solution, even though I think this is actually a fault in either the browser or the operating system. Luckily, JavaScript enables us to detect fairly easily whether or not a link has been responded to.

When a user clicks on a mailto-link, the expected behaviour is that a new window is opened on top of the browser, so that a user can compose the email. This means that the focus on the mail website is lost. Using this, we can detect the 'blur' event on the current window after a user clicked a link. If the user does not have a mail client installed, the browser will do nothing, so the blur event will never be called. So what we have to do is detect when a user clicks a mailto-link, and then immediately check for the 'blur' event. If the 'blur' event does not happen after, say, half a second, we can assume the browser did not respond, and we should resort to an alternative (open a form or so).

The code:

(function($) {
  $('a[href^=mailto]').each(function() {
    var href = $(this).attr('href');
    $(this).click(function() {
      var t;
      var self = $(this);

      $(window).blur(function() {
        // The browser apparently responded, so stop the timeout.
        clearTimeout(t);
      });

      t = setTimeout(function() {
        // The browser did not respond after 500ms, so open an alternative URL.
        document.location.href = '...';
      }, 500);
    });
  });
})(jQuery);