Allow call (and maps, and mail) in cordova

Cake picture Cake · Feb 5, 2016 · Viewed 8.4k times · Source

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

Avijit picture Avijit · Apr 11, 2016

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:*" />