CODEWITHSUNDEEP
androidcordovaionic-framework
Jimothey
Jimothey

Reputation: 2434

mailto: links not opening mail app on Android in cordova app

This is driving me crazy. I'm working on a Ionic app (Cordova, Angular etc). I have a contact us link which contains a mailto: href

href="mailto:[email protected]?subject=my%20App"

I've read countless posts on SO that say you have to remove 

<access origin="*"/>

from the config.xml in the project root and replace it with:

<access origin="mailto:*" launch-external="true" />

Which I've done. When I run ionic build it gets added to the config.xml in platforms/android/res/xml. But no matter what I do the link doesn't open the mail app on any Android simulator (even when email is configured in the simulator).

Sadly I don't have a device to test on - so is this just a emulator thing or am I missing something?

Upvotes: 28

Views: 28326

Answers (7)

Nigidoz
Nigidoz

Reputation: 478

Just in addition to use Cordova's WhiteListPlugin ;

It worked for me in this way: in config.xml 

<access origin="*"/>
<access origin="mailto:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="yes"/>

And specially for ios add :

<platform name="ios">
    <allow-navigation href="mailto:*" launch-external="yes"/>    
    ...
 <platform name="ios">

Upvotes: 2

Martin
Martin

Reputation: 4765

Try this:

window.location.href = "mailto:[email protected]?subject=Works on iOS too";

Upvotes: 9

tkepa
tkepa

Reputation: 31

Altering Cordova's WhiteListPlugin in config.xml did not work for me -- <access >,`. I tried many combinations, including those above. Doesn't mean these won't work necessarily, just for my setup it doesn't. (Building for Browser, Android, and iOS)

However, using the Cordova InAppBrowser Plugin worked:

As mentioned above, use the inAppBrowser plugin and set the target to _system.

This by passes the issues I was seeing in iOS with unsupported url, and launches the native systems web browser (i.e., Does not rely on WhiteListPlugin to allow the URL call).

Hope this helps.

Cordova version 6.3.1.

Upvotes: 0

Chaos7703
Chaos7703

Reputation: 691

I just solved this thanks to the responses & articles above. I'm not sure what has or hasn't changed since the above postings, but for the reference of others; I now have http://, https://, tel:, & mailto: working with only the inappbrowser plugin installed and no manual edits to config.xml needed. I did everything mentioned above & it still wasn't working, so I started fiddling and found that I the window.open() call requires the second parameter of "_system" to work correctly (it tried to use the browser and "navigate" to http://mailto:xxx... without the "_system" flag).

However, for curiousity's sake, I uninstalled the whitelist plugin and removed the manual edits in config.xml and it still works.

Notes:

-I don't remember all the variations I tried, but onclick couldn't access the Ionic/Angular/Cordova scope(s), so I stuck with ng-click.

-I did not / have not tried using href="..." with any of the options. (If I remember, I'll test them and update this to reflec my results.)

So, with only the cordova-plugin-inappbrowser installed and no config.xml edits, here are my working / tested solutions:

ng-click="window.open('http://somesite.com', '_system')"
ng-click="window.open('https://google.com', '_system')"
ng-click="window.open('tel:(123) 345-4567')"
ng-click="window.open('mailto:[email protected]', '_system')"

Tested 9/20/2016 Using:

HTC One M8, android 6 ,cordova v6.3.1, cordova-plugin-inappbrowser v1.5.0, ionic v2.0.0, jdk1.8.0_101, android SDKs 21, 23, & 24 installed

Upvotes: 5

Sarah Gallitz
Sarah Gallitz

Reputation: 31

Ran into this today and noticed something that affected mailto, but not tel, links:

In addition to adding the intent to the cordova config as described by dave's answer

<allow-intent href="mailto:*" />

I also had to allow mailto links in the csp header of my page

<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">

Didn't see any documentation around this behaviour of CSP headers.

Upvotes: 3

LeftyX
LeftyX

Reputation: 35587

You must install the cordova plugin whitelist:

cordova plugin add cordova-plugin-whitelist

or if you want to save the reference to your config.xml file:

cordova plugin add cordova-plugin-whitelist --save

and that you have to add the intent to your config.xml file:

<allow-intent href="mailto:*" />

You can find more info here.

Upvotes: 32

dave
dave

Reputation: 205

what if you replace "true" with "yes"... I use this in my app and it works.

<access origin="tel:*" launch-external="yes"/>

Upvotes: 3

Related Questions