Allow call (and maps, and mail) in cordova

Question

I've been struggling with this for a while. I'm trying to make a call after people press 'Call' from a popup. Funny thing is, that it goes straight to calling when they click the phone number. But when they hit 'Call', console returns:

ERROR Internal navigation rejected - <allow-navigation> not set for url='tel:06-83237516

Code:

Controller:

$scope.callPerson = function() {
    var link = "tel:" + $scope.person.phonenumber;
    var confirmTel = $ionicPopup.confirm({
        title: $scope.person.phonenumber,
        cancelText: 'Cancel',
        okText: 'Call'
    });
    confirmTel.then(function(res) {
        if (res) {
            window.open(link);
        } else {
            console.log('cancel call');
        }
    });
}

Config.xml:

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

html:

<div ng-click="callPerson()"> {{person.phonenumber}}</div>  

With Mail, it doesn't work at all, and returns an identical error. Same for opening maps. It does work in the PhoneGap test app, but not when deployed.

Maps code:

$scope.openmaps = function() {
    var address = $scope.person.adres + ", " + $scope.person.plaats;
    var url = '';
    if (ionic.Platform === 'iOS' || ionic.Platform === 'iPhone' || navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
        url = "http://maps.apple.com/maps?q=" + encodeURIComponent(address);
    } else if (navigator.userAgent.match(/(Android|BlackBerry|IEMobile)/)) {
        url = "geo:?q=" + encodeURIComponent(address);
    } else {
        url = "http://maps.google.com?q=" + encodeURIComponent(address);
    }
    window.open(url);
};

Answer 1

May be it is too late but I want to comment so that other users couldn't face this issue. Because I didn't find any working solution anywhere.

You need to add <allow-navigation href="tel:*" /> in config.xml

I was facing same issue for mailto intent. It was working when I tried it directly

<a onclick="mailto:[email protected]">Email</a>

But I got an error when I tried to call it using javascript window.location.href = 'mailto:[email protected]

internal navigation rejected - <allow-navigation> not set for url='mailto:[email protected]'

All you need to is to add allow-navigation in your config.xml

So your config.xml will be:

<access origin="mailto:*" launch-external="yes"/>    
<allow-intent href="mailto:*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-navigation href="mailto:*" />

Answer 2

I use this config in config.xml for ios

    <allow-navigation href="tel:*" />

for android

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

Answer 3

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:

Use the inAppBrowser plugin and set the target to _system. cordova.InAppBrowser.open('tel:123456789', '_system');

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

Hope this helps.

Cordova version 6.3.1.