Please help me on this issue, The below code is working fine on Android but not working on iOS. Its returning the error
XMLHttpRequest cannot load file:///var/containers/Bundle/Application/16B00380-9909-4D99-B4CA-B02DA895431B/Pilot%20Forge.app/www/templates/Menu.html.
Cross origin requests are only supported for HTTP
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<script type="text/javascript">
var Appclaim = angular.module("app_forge", []);
Appclaim.controller("claimController", function ($scope) {
$scope.MenuTemplate = {
Name: "Menu.html",
Url: "templates/Menu.html"
}
});
</script>
<form name="form" ng-app="app_forge" ng-controller="claimController">
<div>{{MenuTemplate.Name}}</div>
<div ng-include="MenuTemplate.Url"></div>
</form>
</body>
</html>
Just ran into this today - adding this to the config.xml under the ios platform section fixed it for me.
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />
That and making sure you have the newest version of the iOS platform added / and that you are using WKWebView instead of the UIWebView.
Here's a GitHub issue that helped to find the answer:
Cordova not allowing https cross origin requests.
And here's a link to the article on Cordova's site:
UPDATED: How to handle the 'Deprecated API Usage - UIWebView' warning while uploading to the App Store
I guess iOS treats all file:// protocols as cross origin now. (iOS is proving to be a real pain to develop for.)
Related
I have been experiencing the same issue, and have tried in the past 2 weeks numerous solutions found online for this with no success, any help appreciated :)
I am writing a simple app using Cordova for IOS and Android and building it using Phonegap build. The problem is that I cannot get the "navigator.geolocation.getCurrentPosition" (or navigator.geolocation.watchPosition) calls to return anything except a timeout error on iOS. (works perfectly on Android)
Additionally, the location services dialog never appears (requesting user permission to allow GPS for the app)
To add to this strange behavior, it seems that i have to touch the screen after the app is loaded to initiate the geolocation call, on most cases the app just sits there and does nothing until the screen is touched.
Testing this on iPhone 5 with iOS 9
Things I tried:
Changing timeout settings (up to 30 seconds)
Setting enableHighAccuracy true/false
Running code with or without the geolocation plugin
Manually adding the NSLocationWhenInUseUsageDescription/NSLocationAlwaysUsageDescription settings (or both) to the plist file
Installing different plugin versions for the geolocation plugin
Changing Content Security Policy meta tag
Trying to add or remove the <plugin> declaration from root config.xml
Current plugins installed ($cordova plugin list):
cordova-plugin-dialogs 1.2.0 "Notification"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-whitelist 1.2.0 "Whitelist"
cordova.plugins.diagnostic 2.3.5 "Diagnostic"
Root config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="info.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App name</name>
<description>
App Name
</description>
<author email="test#test.com" href="http://test.com">
App Team
</author>
<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>
</widget>
index.js
var geo = {
getGeo: function() {
navigator.geolocation.getCurrentPosition(
geo.onSuccess,
geo.onError,
{maximumAge:0, timeout: 5000, enableHighAccuracy: false});
},
onSuccess: function(position) {
alert('GOT location');
alert(position.coords.latitude + ' --- ' + position.coords.longitude);
},
onError: function(error) {
alert('error getting geo!');
}
};
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// 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);
geo.getGeo();
}
};
app.initialize();
iOS Plist file:
<key>NSLocationAlwaysUsageDescription</key>
<string>This app requires constant access to your location in order to track your position, even when the screen is off.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
Index.html:
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Any help in the right direction appreciated!
#daddio
Oh. that's it. I should be more dogmatic on this. This should take care of the problem.
It is not advisable to use Phonegap CLI to make your Phonegap Build build project. Phonegap build requires that index.html and config.xml both sit in the root directory. All the extra files that you are required to use with Phonegap CLI, never are created or needed with Phonegap Build.
So, I'm going to give you one of my working demos. Notice that all the files are in one (1) directory.
tutorial/blog entry - An HTML Boilerplate for Phonegap Build
source code Phonegap--Generic-Boilerplate
Notice how the compiler version is set to:
<preference name="phonegap-version" value="cli-5.2.0" />
Notice, if you change cli-5.2.0 to 3.7.0, nothing appears to change.
Basically for Phonegap Build, you need index.html and config.xml - that's it. Then for security reasons (as of Cordova Tools 5.0.0), it is advisable to create a css file and a javascript file. However, I'll show you how to get around this.
Here is my complete list of Demo Apps.
Phonegap Demo Apps
YOUR FIX
This is my working code, test with 3.5.0 and cli-5.1.1 and cli5.2.0
source code Phonegap-GPS-Test
On Your fix, notice how the version is set to: <preference name="phonegap-version" value="3.5.0" />
Okay, I trust all of this will work for you. As such, your documentation is here:
https://build.phonegap.com/docs
There are some special rules for adding plugins, but I'll give you those when your program is running.
How to add Plugins with Phonegap Build
FOR THE MOST IMMEDIATE FUTURE, get your *core* plugins from this list:
http://cordova.apache.org/docs/en/5.4.0/cordova/plugins/pluginapis.html
Get your 3rd-party plugin from this source:
http://cordova.apache.org/plugins/
When using Phonegap Build, sometimes the pluins get fixed (or updated) and this breaks Phonegap Build. This is because the "fixes" require the latest version of the compiler, and Phonegap Build is always at least one version behind.
There are two ways to deal with 3; see 4 and 5.
I have created this Worksheet. You may want to make a copy or just use it as a reference. I use this worksheet to create my demos, I so know the list is good. I am working on cli-5.2.0 right now. (Should finish by Monday or so.) However, I do not test ALL 3rd-party plugins; there are 800+ plugins.
If you fail to set the version number on a plugin, you will get the latest version. If your build fails, then set the version. If the build still fails, try the previous two or three version to find one that works. NOTE, these older plugins may have bugs that prevent you from using them. So, try an even earlier version.
Lastly, if you think you have hit a bug, then here is a page with links to the Bug respository for each plugin. Last Update is on the top left. Best of Luck.
The deviceReady event is not fired when starting the app.
Dragging the notifications list down from the top of the screen and releasing then causes the deviceReady to fire.
Similarly, trying to display a page in the inAppBrowser doesn't display until the notifications are dragged down and released.
Key elements in the config.xml are:-
<gap:plugin name="cordova-plugin-whitelist" version="1.0.0" source="npm" />
<gap:plugin name="cordova-plugin-inappbrowser" source="npm" version="1.0.1" />
<gap:plugin name="cordova-plugin-device" source="npm" version="1.0.1" />
<preference name="permissions" value="none"/>
<preference name="fullscreen" value="true" />
<preference name="exit-on-suspend" value="true" />
Html:-
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Security-Policy" .... />
</head>
<body >
<div id="idSplash" class="textCenter" >
<div id="idSplashHeader">
<div class="headerImg"></div>
</div>
<div>
<div id="idSplashMessage">Starting up ...</div>
</div>
<div id="idSplashBody"></div>
<div id="idSplashFooter"><a id="idTestLink" href="javascript:null" target="_blank">Click here for google</a></div>
</div>
<!-- ************************************************************************** -->
<script src="js/jquery-2.0.3.min.js" type="text/JavaScript" ></script>
<script type="text/JavaScript">
$(document).ready(function () {
function onReady() {
$("#idSplashMessage").text("deviceReady");
alert("deviceReady");
}
document.addEventListener("deviceReady", onReady, false);
$("#idTestLink").click(function () {
var win = window.open(encodeURI("http://www.google.co.uk"), '_blank', 'location=yes');
return false;
});
});
</script>
<script src="cordova.js" type="text/JavaScript"></script>
</body>
</html>
The source of the problems was the inclusion of a content security policy in the html.
Although I believe the CSP was entirely valid, and did not cause any issues with Android, I removed it which allowed the IOS version to work.
The CSP was added in the first place due to an error log from the whitelist plug in suggesting it was required.
#Grebe,
this is a common misunderstanding with developers new to Cordova/Phonegap.
From: Top Mistakes by Developers new to Cordova/Phonegap
4. In the code, did not listen for the 'deviceready' event.
(...) the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
This means you must do this before you call any other libraries.
This also means you need to load cordova.js before jquery.
EXAMPLE
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// _OR_ JUST
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
$(document).ready(function () {
// Call the usual stuff.
}
}
I am working on an app for both android and iOS that will be opening external links. I am currently using cordova-plugin-inappbrowser 1.0.1 to open my links and it is working perfectly in Android, but I seem to be running into the same problem that many other people have. In iOS, I do not get a toolbar to appear and thus am stuck as I cannot click on the "done" button (or back/forward buttons for that matter.) I have built the app using both phonegap build online and through the command line tools, with the same behavior in each instance. It does not work in either an emulated environment or a native device environment. I have been searching online and this seems to be an extremely common problem, but none of the proposed solutions have worked over the past 2 days and ~15 hours of testing (for just a stupid little link!) I would like to remain in-app, but would not be opposed to going to safari if that is the only solution. My relevant code and versions:
Phonegap cli-5.1.1 (iOS 3.8/Android 4.02)
Cordova 3.5.0-0.2.7
cordova-plugin-inappbrowser 1.0.1
config.xml relevent code:
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
index.html:
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
// Cordova is ready
//
function onDeviceReady() {
alert('Device is ready!');
//iabRef = window.open('http://apache.org', '_blank', 'location=yes');
//iabRef.addEventListener('loadstart', iabLoadStart);
//iabRef.addEventListener('loadstop', iabLoadStop);
//iabRef.addEventListener('exit', iabClose);
}
</script>
<style type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
body
{
background: #000 !important;
background-image:url(backgrounds/1080widephone.png) !important;
background-size:cover !important;
}
.ui-content{
background: transparent !important;
}
.ui-page{
background: transparent !important;
}
.ui-footer{
background: transparent !important;
}
</style>
</head>
Various links (all act as buttons):
window.open('url' ,'_blank')
(NOTE: This appears to open in the default WebView for iOS and the inappbrowser for Android)
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes' , 'toolbar=yes', 'toolbarposition=top' , closebuttoncaption=Return'
(NOTE: Nothing happens when I use this in either iOS or Android builds. I based this syntax off of the description)
My kneejerk reaction is that the plugin isn't loading, but I don't see how that can be the case if it is clearly working in an android build but not an iOS build using exactly the same code on phonegap build. Any help would be greatly appreciated, I feel like I'm running around in circles here!
I know this is a late response but I’ve found one possible solution.
In my case, I was using ngCordova’s $InAppBrowser within the Ionic framework to open a file or url. To test this, I was using Xcode’s iPhone simulator as well as Ionic’s “Ionic View” app. Within both of these options, $InAppBrowser will NOT show a “Back” or “Done” button.
However, if you open your project’s .xcodeproj in Xcode and run your application on an actual iOS device, the InAppBrowser should work as expected.
I spent hours on this issue only to discover Ionic View restricts the options of $InAppBrowser. However, I’m still not 100% sure as to why this doesn’t work in the iOS emulator.
Note: I believe all of this applies even if you’re directly using Cordova and not ngCordova.
The values for the options string in
cordova.InAppBrowser.open
needs to be a single string of name=value pairs separated by ,
So try:
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes,toolbar=yes,toolbarposition=top,closebuttoncaption=Return');
Additionally you should make sure your application's links open with the IAB by hijacking them and opening them in the IAB and suppressing the default event... for example with JQuery to hijack all the links in a div with id "infoExternalContent" and open them in the IAB with some options set for iOS only (using Cordova device platform to detect platform):
$('#infoExternalContent').find('a').each(
function() {
var href = $(this).attr('href');
var iabOptions = (device.platform === 'iOS' ? 'location=no,enableViewportScale=yes,transitionstyle=fliphorizontal' : '');
if (href.indexOf('http') === 0) {
$(this).click(function(e) {
e.preventDefault();
cordova.InAppBrowser.open(''.concat(this.href), '_blank', iabOptions);
});
}
}
);
I don't use phonegap build, but I can't imagine that it wants all of this loaded ...
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
cordova.js is loaded twice, along with phonegap.js. Just sayin'
If you uncomment
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
What happens?
I would also try
cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
If neither of those open a window to apache, I would readd the plugin.
Okay I've been working on this issue for a while now and can't figure this thing out. Simple PhoneGap test app, trying to show an alert.
Using Cordova 2.9.0 for iOS. I've added some simple test code and tested it in chrome to see where it breaks, because it isn't working in the emulator
When I test in the Chrome (of course same result in emulator, but no error message is showing)
It executes the onDeviceReady as it should
It sets tb2 textbox value to 'before alert'
Then it breaks with the error: Uncaught TypeError: Cannot call method 'alert' of undefined, on this line: navigator.notification.alert(...
It should be referencing the cordova.js properly, here is the structure of my app folder:
cordova_plugins.js
cordova.js
/spec
spec.html
config.xml
/css
home.html
/img
index.html
/js
/res
Here is my config.xml code:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.blahblahblah.hello" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Hello World</name>
<description>
Test blahblahblah Application
</description>
<author email="blahblahblah#blahblahblah.com" href="http://blahblahblah.com">
blahblahblah
</author>
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<plugins>
<plugin name="Notification" value="CDVNotification" />
</plugins>
</widget>
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
document.getElementById('tb1').value = 'device ready';
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alert
//
function showAlert() {
document.getElementById('tb2').value = 'before alert';
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
document.getElementById('tb3').value = 'after alert';
}
</script>
</head>
<body>
<p>Show Alert</p>
<input type="text" id="tb1" value="" />
<input type="text" id="tb2" value="" />
<input type="text" id="tb3" value="" />
</body>
</html>
I have searched documentation, and haven't found any clue of why this isn't working, most answers to this question don't address version 2.9.0
Thanks in advance.
I know the question is about Phonegap 2.9, but that's the first thing Google spits when somebody looks for "phonegap alert not working". So here's what I did for it to work with Phonegap 3.0:
According to the manual, you need to add the plugin to your project. Just navigate to your project root folder and write this command:
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
After that, I added this to my html:
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
navigator.notification.alert("PhoneGap is working", function(){}, "", "");
}
</script>
I'm using Phonegap 2.9.0 and the problem that i had is that I haven't add the script cordova.js to the page.
Also be aware that exist a cordova.js file specific to each platform so watch out of adding cordova.js from android on iOS.
Remember that all calls to the phonegap API should be done after deviceready has fired
try to add this feature to your config.xml file..
<feature name="Notification">
<param name="wp-package" value="Notification"/>
</feature>
..I hope that's help...
All you need is to add the plugin:
cordova-plugin-dialogs
Then use the alert function which will interrupt program flow:
alert("some problem here");
Works for iOS and Android.
I am studying blackberry webworks. I have done one demo, where there is one page that run in background and is loaded on device startup. I have used blackberry rim:background to specify background, and has started interval in background page, but the page is not working. Please help me in getting out of this problem,
Here is my code in config.xml
<content src="index.html" >
<rim:background src="index.html" runOnStartup="true" charset="string" />
</content>
And HTML code
Insert title here
<script type="text/javascript" src="timer.js" />
<script>
function background()
{
self.setInterval(interval,"3000");
}
function interval()
{
i=i+10;
}
}
</script>
<body onload=" background()" >
</body>
</html>
Thanks in advance!
which phone/OS are you looking to target with this sample? The background element of the config.xml is a little bit different for a BB10 app, than it is for OS 5-7.
For BB OS 5-7 you would do this just like you have above
<content src="index.html"><rim:background src="listener.html" runOnStartup="true" /></content>
I would check-out the sample config.xml documents over here, and make sure everything is setup properly to start with.