27

I have a mailto link on a page. It works as expected when the page is loaded by itself.

However when the page is loaded via a frameset in Chrome nothing happens. With the developer tools loaded the error "[blocked] The page at https://mysite.com ran insecure content from mailto:..." is displayed.

How can I fix/workaround this?

Dale K
  • 25,246
  • 15
  • 42
  • 71
  • 1
    It looks like Dale has filed a bug with Chrome: https://code.google.com/p/chromium/issues/detail?id=306349&q=mailto%20gmail&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified – kendsnyder Jun 10 '15 at 04:19
  • 1
    `tel:` links are affected too. Same solutions apply. – Álvaro González Jul 11 '18 at 07:00

7 Answers7

33

Yes, using "top" is the trick, but you can do it with HTML alone!

<a target="_top" href="mailto:...">email</a>
kendsnyder
  • 764
  • 7
  • 12
  • This is excellent. It allows mailto links to now work within an iframe using the Chrome browser. Thank you very much!!! – rrudland Oct 01 '14 at 19:58
  • I had a problem making `mailto:` links in a Facebook frame. This worked! – Rémi Breton Dec 02 '14 at 16:10
  • Never knew what "_top" was for, until now (shame on me). This solves some problems I had on a range of Android phones as well. Thanks! – Jurgen Feb 11 '15 at 11:02
  • Also fixes `mailto:` links when using URL Frame masking to forward a URL! – Warpling May 14 '15 at 06:37
  • I would recommend using _blank instead of _top. If the user set a web-based email client as the default email tool, the email client page will replace the parent page with _top. – Adamy Jun 07 '15 at 22:12
  • @Adamy, Yes the iframe case is a good point. However, you'll want to use _self, not _blank. _blank will cause a new blank untitled tab to open. _top will trigger window.onbeforeunload to fire. If the top frame is observing window.onbeforeunload, you may see a warning like "Are you sure you want to leave this page?" (If you click yes, the mailto will still work fine.) See this plunker http://embed.plnkr.co/12QvXVVbSKjuVT1cjrc0/preview Note that plunker's preview window is in an iframe and if you click edit then run you'll see an onbeforeunload warning message for the _top example. – kendsnyder Jun 08 '15 at 22:31
  • @kendsnyder Thanks for your advice. However in my case as I set up gmail (in Chrome) as my default email application, _self doesn't do anything when I clicked on the link. – Adamy Jun 09 '15 at 01:31
29

I also had this issue recently with an iframe. Using the top frame worked and should be compatible with all major browsers.

window.top.location = 'mailto:...';
Jason Hardies
  • 314
  • 2
  • 3
  • So you would have to write a javascript onclick (or something similar) to handle this mailto: link? I'm just looking for a the syntax for this solution. – Chris Nov 20 '13 at 15:21
  • 9
    Yes, using "top" is the trick, but you can do it with HTML alone! email – kendsnyder Apr 22 '14 at 16:07
  • Hi, I just came across this issue today.. and this solution works. however I just want to understand why it works? why setting the target to `_top` works? Does the browser not care to check for security if an anchor link is outside of an iFrame? – jmesolomon Jun 21 '19 at 03:09
  • tried all combinations, this is the only one that worked for me in Chrome without having to open a blank window – Antoni4 Aug 28 '19 at 15:27
  • @kendsnyder I am using a component that accepts an onClick, for me this is the only thing that worked. I can't use HTML for this one, i.e. it needs to be triggered programmatically through callback. – Antoni4 Aug 28 '19 at 15:30
6

Here is the solution I ended up with: Tested with Chrome, Firefox, IE6, IE7, IE8, IE9, IE10, IE11, Safari

$("a[href^='mailto:']").on("click",function() {
    window.top.location = $(this).prop("href");
    return false;
});
Davin
  • 137
  • 1
  • 2
  • 11
  • Strangely I couldn't get that to work - it seemed to die inside jquery somewhere (we're using V 1.6.1 still). But as soon as I used the click method instead it worked well. Good stuff. – Dale K Nov 18 '13 at 21:49
  • Yes, on is the new click for newer versions of jQuery. – Davin Nov 19 '13 at 22:37
3

add target="_top" or "_blank" or "_parent"

<a target="_top" href="mailto:a@b.c">email1</a>

<a target="_top" href="mailto:a@b.c">email2</a>

infused
  • 24,000
  • 13
  • 68
  • 78
Wynston
  • 41
  • 2
2

This will also work, and won't close the window with Facebook.

<a href="mailto:..." target="_blank">...</a>

or

$("a[href^='mailto:']").attr('target','_blank');
Dale K
  • 25,246
  • 15
  • 42
  • 71
Sergei Zahharenko
  • 1,514
  • 12
  • 16
1

Possibly because your parent frameset is https, but Chrome now seems to treat the mailto link as insecure.

I just came across a similar issue when triggering a mailto link via

window.location = 'mailto:...'

Changing it to this worked around it.

window.open( 'mailto:...')
Hugh
  • 1,431
  • 2
  • 16
  • 30
  • It sounds like its a bug then? In which case I should file a bug report? – Dale K Oct 08 '13 at 19:21
  • OK, your workaround does open a new email, but it also opens a new, blank, tab/window which isn't desirable. I've opened a bug report with google. – Dale K Oct 11 '13 at 04:36
  • 1
    Yup it does. We had to script it immediately closing, which is still a bit rubbish. – Hugh Oct 11 '13 at 08:28
0

This is my workaround until Chrome bug is fixed:

$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

if($.browser.chrome){
     myWindow=window.open("mailto:"+eml+"?subject="+msb,'','width=50,height=50');
     myWindow.close();
} else {
    window.location.href = "mailto:"+eml+"?subject="+msb;
}

For Chrome, make instance with window.open() method and close that instance immediately. Small window will "blink" for a short period but will do the job. It is "dirty" solution but as much as Chrome's bug.

For other browsers window.location() method can be used.

mikikg
  • 1,488
  • 1
  • 11
  • 23