Search code examples
mailto

mailto links not working in Chrome and Safari Mobile


In my jQuery Mobile App, I have a mailto link, its href attribute is dynamically generated and it is 'clicked' via jQuery.Here is the link code:

<a id="mealLink" href="mailto:[email protected]" style="display: none;">This is the mailto 
link</a>

A click handler is attached to it like this:

$('#mailLink').bind('click', function() {
window.location.href = $(this).attr('href'); 
});

Lastly,a function creates the href attribute for the link with emailaddress, subject and message body and click is simulated via jQuery:

$emailAddress= ..

$subject= ....
$body=...
$emailString="mailto:"+$emailAddress+$subject+$body;
$emailLink= $("#mealMail");
$emailLink.attr("href",$emailString);
$emailLink.click();

Now, this code is working perfectly in: Mozilla desktop Safari desktop Android

But not working in: Safari Mobile Chrome desktop

Any suggestions?


Solution

  • After searching for complex solutions, I found a much easier solution by chance. The issue here is that if a mailto link is directly clicked, it works in all browsers, but if it is indirectly clicked, such as via jQuery .click() function, it does not work in all browsers. Therefore, here is my implementation:

    <a href='#mailtolink' id="emailLink">This is a mail to link</a>
    $emailAddress= ..
    
    $subject= ....
    $body=...
    $emailString="mailto:"+$emailAddress+$subject+$body;
    $emailLink= $("#emailLink");
    $emailLink.attr("href",$emailString);
    

    Now, depending upon the context of an application, the href parameter of the link can be setup and when this link is clicked, it works. I have tested in following browers:

    1. Mozilla Firefox Desktop
    2. Safari Desktop
    3. Chrome Desktop
    4. Safari mobile on ipad 1