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);
};
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:test#me.com">Email</a>
But I got an error when I tried to call it using javascript window.location.href = 'mailto:test#me.com
internal navigation rejected - <allow-navigation> not set for url='mailto:test#me.com'
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:*" />
I use this config in config.xml
for ios
<allow-navigation href="tel:*" />
for android
<allow-intent href="tel:*"/>
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.
Related
we're moving with our APP to new new wkweview due to the apple requirements.
One of APPs, is using StripeJS sdk in order to allow payment in app. Problem occurs when APP is bootstraping and the stripe sdk is include with the following code:
// Payment service is not initialized yet
$.ajax({
type: "GET",
cache: true,
url: "https://js.stripe.com/v3/",
dataType: "script",
error: function(XMLHttpRequest, textStatus, errorThrown) {
Logger.error("An error ocurred during SDK download");
def.reject();
},
success: function() {
Logger.debug("Stipe JDK downloaded correctly");
initialized = true;
def.resolve();
}
});
We already tried to use '' head tag in the index.html or creating dynamically one script TAG and appenging it to the body: but no one fix the problem.
Script Inclusion Tests
[Angular $http method]
$http({
method: "GET",
url: "https://js.stripe.com/v3/"
}).then(
function(res) {
angular.element("body").append("<script>" + res.data + "</script>");
}, function(err) {
def.reject();
});
[index.html]
<html>
<head>
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
...
Problem
A browser page is opened and APP is left in the background; being more specific, the "METRICS_CONTROLLER" case is catch in switch at row 767 ( see library at url < https://js.stripe.com/v3/ > ).
Have anyone an idea why including that script the browser page is opened ?
just to answer my question we found the problem.
The problem was about permission to navigate url not allowed by the cordova configuration ( file 'config.xml' ).
More specifically, we need to add the following row in our config. file
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
So finally, our CORS permission definition is:
<access origin="*" />
<allow-intent href="sms:*" />
<allow-intent href="tel:*" />
<allow-intent href="geo:*" />
<allow-intent href="mailto:*" />
<allow-intent href="file://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
'*' is due to the fact that the APP can trigger outside resource, so we cannot known which url will be opened by user in APP.
Hope this help #saperlipopette
Simon
I have a website(HTML5 Game) that uses NodeJS to manage a database among other things, i am trying to port it too android and IOS using Cordova, but i do not know how to get Cordova to load the website using a URL, i need it to load into the URL because of all the server side stuff. Does anyone have any advise on how to do this?
I've looked at countless articles/posts but every time i test it out by clicking on index.HTML it doesn't redirect/show my website.
I have tried several plugins and even just using simple javascript to load the website but nothing has been working.
i get the following error on when i open the index.html
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
my config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="http://mysite.us*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
<cordova>
<access origin="http://mysite.us*"/>
</cordova>
My index.js
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
window.location="http://mysite.us";
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
Here is the code I use:
<plugin name="cordova-plugin-whitelist" source="npm" />
<allow-navigation href="https://example.org/*" />
<allow-intent href="https://example.org/*" />
<access origin="https://example.org/*" />
It doesn't need to be in a platform tag and you will obviously need to replace the url with your own.
If you need you select everything in a folder or domain, you can use the wildcard: * (Like shown above)
EDIT:
Keep in mind that you will also need to whitelist like that all resources loaded by your webapp like for example:
If you load jQuery via a cdn, then you will need to whitelist that url or the cdn's whole domain name.
Remember too that if outside urls were blacklisted in the first place is to prevent Xss injection. If you whitelist too much urls, people may be able to load a script from a source you have whitelisted so to deceive a user via your app.
EDIT 2:
You can also simply use an iframe instead of using window.location
<iframe src="https://example.com/nodejs-webapp/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
And this goes in the head tag
<style>body{margin:0;}</style>
In my HTML file I am using a sliding-item and inside the options a button that calls a function:
<button secondary *ngIf="post.telefone" (click)="callIT('tel:'+post.telefone)">
<ion-icon name="call"></ion-icon>
Call
</button>
In the js file I have the function callIt() like:
callIT(passedNumber) {
window.location = passedNumber;
}
In my config.xml I added these line of code:
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
This is working for android for both the emulator and on a device. In ios the call functionality isn`t working at all. Thanks to all for help
I'm getting an InvalidAccessError when I try to open a Indexed Database in my cordova iOS application.
Platform:
cordova: 5.4.1
cordova-ios: 4.0.1
iOS 9.2 (simulator and real device)
I already added the Plugin to use the WKWebview which made the the indexedDB object at least defined, but the error is thrown. The code works in chrome, safari and mobile safari if I run it via cordova's own web server.
config.xml looks like this
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
and I try to open the indexedDB with this:
openDb: function() {
var openRequest = window.indexedDB.open(DB_NAME, DB_VERSION);
openRequest.onupgradeneeded = function(event) {
console.log('upgrade needed');
console.log(event);
myIndexDb = event.target.result;
var options = {
autoIncrement: true,
keyPath: 'key'
};
var objectStore = myIndexDb.createObjectStore(DB_STORE_NAME, options);
};
openRequest.onerror = function(event) {
console.log(event);
console.log('indexDB open Error!');
};
openRequest.onsuccess = function(event) {
console.log('open success');
myIndexDb = this.result;
};
openRequest.onblocked = function(event) {
console.log('request is blocked');
console.log(event);
}
}
At the moment it works with the Telerik Plugin https://github.com/Telerik-Verified-Plugins/WKWebView (and cordova-ios 3.9.2)
EDIT:
Looks like IndexedDB problems were fixed on iOS 10, and also added it to UIWebView.
OLD ANSWER:
The way to workaround the problem with cordova-plugin-wkwebview-engine and IndexedDB is to use a local webserver.
You can use the wkwebview-engine-localhost plugin to workaround the bug adding the local webserver. To install the plugin use
cordova plugin add https://github.com/apache/cordova-plugins/tree/master/wkwebview-engine-localhost
I'm using HTTP requests to active php files on a server to draw in information from a database. The project works perfectly on the x-code simulator however on the device there seems to be no internet access for the app. My information from the database appears blank. It's as if the http requests aren't running.
Below is my config.xml file.
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/GearSwipeTutorial" version="1.0.0" viewmodes="maximized">
<tizen:application id="rMZJXG1BgI.GearSwipeTutorial" package="rMZJXG1BgI" required_version="2.2"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<icon src="icon.png"/>
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<access origin="http://cs1.ucc.ie" subdomains="true" />
<access origin="http://www.webqr.com" subdomains="true" />
<access origin="http://fonts.googleapis.com/css?family=Raleway" subdomains="true" />
<access origin="http://code.jquery.com" subdomains="true" />
<access origin="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" subdomains="true" />
<access origin="http://fonts.gstatic.com" subdomains="true" />
<access origin="http://maps.gstatic.com/maps-api-v3/api/js/18/4/main.js" subdomains="true" />
<gap:plugin name="org.apache.cordova.network-information" version="0.2.3" />
<gap:plugin name="org.apache.cordova.network-information" /> // Change square braces to arrow braces.
<feature name="NetworkStatus">
<param name="ios-package" value="CDVConnection" />
</feature>
<access origin="*" subdomains="true" />
<plugin name="Camera" value="CDVCamera" />
<plugin name="NetworkStatus" value="CDVConnection" />
It works perfectly in the simulator and browser but not on the device. The function breaks at xmlhttp.onreadystatechange.
function importJson(str) {
alert("1");
if (str=="") {
document.getElementById("top5").innerHTML="";
return;
alert("2");
}
if (window.XMLHttpRequest) {
alert("3");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("4");
}
xmlhttp.onreadystatechange=function() {
alert("15");
if (xmlhttp.readyState==4 && xmlhttp.status == 200){
alert(xmlhttp.response);
alert("5");
data = JSON.parse(xmlhttp.response);
receivedData(data);
alert("hello");
}
}
I dont thing there is anything specific in the phone gap which allow or disallow the internet access . The most important thing is <access origin="*" subdomains="true" /> and it is in the place for you .
I guess your device connection is too slow and your request in timing out this could be the reason . Try to take device in the same network in which you are trying to access for simulator .
Shouldn't you be using something like XMLHttpRequest
function reqListener () {
console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();
You probably need to use generic javascript functions because I don't think that ActiveX objects will work on all devices.
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");