I have tried this method and it is working perfevtly in Android but not in IOS
Call
And in my config.xml file
<access origin="tel:*" launch-external="yes" />
the above method is tested in real devices and it is working only for android, is there any other method to make it work in IOS
This method worked for me in IOS
<div onclick="window.open('tel:7795713372', '_system', 'location=yes')">Call me</div>
Also you need to install cordova inapp browser plugin. And need to whitelist the request in config.xml by adding whitelist plugin.
Use below code to make it work
Call me
For your code to work on IOS you need to add in the config.xml
<allow-navigation href="tel:*" />
Doing this breaks the functionality on android so make sure to add it inside
<platform name="ios">
To work on IOS you need to add in the config.xml
in .js
window.open('tel:' + number, '_system');
Related
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:info#somedomain.net?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?
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.
Try this:
window.location.href = "mailto:your#ema.il?subject=Works on iOS too";
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#example.com', '_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
what if you replace "true" with "yes"... I use this in my app and it works.
<access origin="tel:*" launch-external="yes"/>
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.
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">
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.
I recently upgraded my cordova based Android app from 3.5.0 to 3.6.3. The special links "tel", "sms", and "mailto" stopped working. When clicked, nothing happens. Is there anything I can do in the AndroidManifest.xml, or Confix.xml or anything else to get them back working?
I built two identical and very simple android apps to prove my suspicion, one with cordova 3.5.0 and one with 3.6.3. Both of them have a simple link:
Call
The first one works, the second one doesn't work.
I think they added a security feature that blocks intents somehow.
PS: both apps built like this:
cordova create app com.tmp.app "App"
cordova platform add android
and in index.html, I added the telephone link above on the device ready block.
Please help.
I finally found the answer. All you have to do is add the following to config.xml:
<access origin="tel:*" launch-external="yes"/>
<access origin="geo:*" launch-external="yes"/>
<access origin="mailto:*" launch-external="yes"/>
<access origin="sms:*" launch-external="yes"/>
<access origin="market:*" launch-external="yes"/>
It all started by IBM!!!
IBM Cordova Security Issues
I had an App built on 3.5.1 version and all special links were working fine. But when i upgraded on the latest version 3.6.3 then they did not work.
So I made below changes in the code and now they works fine.
Add InAppBrowser plugin
cordova plugin add org.apache.cordova.inappbrowser
Create custom function in your JS file to open special links within the InApp browser
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
openNativeAppWindow: function(data) {
window.open(data, '_system');
}
};
The place where you are invoking special links like sms or tel then
pass on your custom url with data and let it open the native browser
window which in turn will push the native App to handle the special
urls.
Few example:
<br><br><input type="button" onClick="app.openNativeAppWindow('http://google.com')" value="Open Google"/>
<br><br><a onClick="app.openNativeAppWindow('geo://0,0?q=dallas')" data-rel="external">google maps</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=Bacau')">Geolocation Test</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=34.99,-106.61(Treasure)')">longitude & latitude with a string label</a>
<br><br><a onClick="app.openNativeAppWindow('geo:0,0?q=1600+Amphitheatre+Parkway%2C+CA')">street address Test</a>
<br><br><a onClick="app.openNativeAppWindow('sms:2125551212')">SMS</a>
<br><br><a onClick="app.openNativeAppWindow('mms:2125551212')">MMS</a>
<br><br><a onClick="app.openNativeAppWindow('tel:2125551212')">Open Phone Dialer</a>
As of Cordova 4.0 you must include the whitelist plugin.
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<allow-intent href="tel:*" />
https://github.com/apache/cordova-plugin-whitelist
Modify the Cordova whitelist
One of the security fixes involves creating a new whitelist for non http/s protocols. If your application uses other protocols besides http:// and https://, such as sms:, mailto:, geo:,tel: etc., then you will need to make some configuration changes to add these protocols to the whitelist.
This is easy to do:
Open up the Cordova config.xml file, located at: yourProject --> apps --> yourProject --> android --> native --> res --> xml --> config.xml. Note: If you have a file located at yourProject --> apps --> yourProject --> android --> nativeResources --> res --> xml, you will have to make the changes to this file (under the nativeResources folder) instead, since if this file exists, it will overwrite the config.xml in /native/ folder when the app is rebuilt.
Scroll to your whitelist entries. You should see items listed like this:
<access origin="https://my.company.com/resources" />
<access origin="http://*.othersupplier.com" />
For every non http/https protocol that you use, you will have to add a whitelist entry like this:
<access origin="sms://*" launch-external="true" />
<access origin="mailto://*" launch-external="true" />
The launch-external attribute will tell Cordova to allow this URL to be handled by other applications in Android system - not by the currently running Cordova/Worklight application.
This will mean that when a user clicks on a <a href="sms:555..."> link, Android will let whatever application is registered to sms: handle the request.
If the only entry that is in your whitelist looks like this:
<access origin="*" />
then your application will allow resource requests to any internet resource, which could open your application to certain kinds of attacks.
You should list specific domains in this tag that you want to be able to access.
If your whitelist looks like this:
<access origin="https://www.ibm.com" />
<access origin="https://my-worklight-server.company.com" />
and inside your application you utilize the mailto: protocol to open a user's email client, and the geo: protocol to display a map, then you should modify the whitelist to look like:
<access origin="https://www.ibm.com" />
<access origin="https://my-worklight-server.company.com" />
<access origin="mailto://*" launch-external="true" />
<access origin="geo://*" launch-external="true" />
HTML :
Call
Add to file "config.xml" :
<access origin="tel:*" launch-external="yes"/>
source :
https://www.ibm.com/developerworks/community/blogs/worklight/entry/action_required_cordova_android_security_update?lang=en`
If you have these lines in your config.xml, then comment them out.
<!--<allow-navigation href="*" />
<allow-navigation href="*://*" />-->
I have an Android Phonegap proyect and I'm trying to use the Splashscreen plugin Cordova provides. I think I have everything correctly set... Here are the pieces of code I think are relevant.
Config.xml
<widget ...>
...
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="15000" />
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
</widget>
Index.html
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.splashscreen.hide()
}
</script>
I have correctly installed with the CLI the plugin and the splash itself is in the res/drawable* folders in the Android project as I think it should be, but regardless of what I try to do, the splash is not showing. Not even a default one. Not even if I disable the navigator.splashscreen.hide() function (in case it was too fast).
I'm absolutely lost now, have been trying tweaks for a week but I just can't see it.
I'm using cordova v3.6.3 in my android project.
I read a API & Plugin Documentations but, I confused the some options in config.
but, I found a perfect solution.
1. above all, you don't need to use
"navigator.splashscreen.hide()" or ".show()" in Android project.
2. refer my directory structure for understanding clearly.
3. Add following codes into your config.xml file.
※ Do not change the value="screen".
you just change the src and delay value for your splashscreen image.
[Config.xml]
<platform name="android">
<splash src="www/res/screen/android/screen-default.png" />
</platform>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="4000" />
4. delete a "screen.png" file from drawable directory for understanding clearly.
5. build your project on your command line (cordova build android)
and, look again drawable directory.
I'll promise, you'll success. :-)
I was having the same issue after the 2.5.1 CLI update. If i run the same project in the VisualStudio ionic simulator all works fine. It also works fine when I run the app in the bowser with Telerik Platform. I just need to comment out navigator.splashscreen.hide(); in my project for the latest CLI simulator or I just get a plain white screen.
James
I'm making an application using jQuery Mobile and Phonegap Build. The jQuery Mobile javascript code works fine, however the phonegap javascript code doesn't seems to be working. The application it's using a multiple html template, and I made the login the index file of the application.
I'm using phonegap version 3.1.0 (current default for build service)
I'm adding the following lines in the config.xml file:
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.file" />
Then, at index.html, I'm adding the following scripts at the header:
<script src="phonegap.js"></script>
<script src="js/settings_page.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-mobile-events.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script>
The settings_page file includes some basic phonegap API interaction, which writes some default values in local storage in case they're not set:
console.log('added');
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
console.log('called');
var application_settings = window.localStorage;
//if no settings have been created, create them
if (application_settings('defaults') === null) {
application_settings.setItem('defaults', 'true');
application_settings.setItem('type', 'all');
application_settings.setItem('sport', 'all');
application_settings.setItem('customer', 'all');
application_settings.setItem('order', 'date');
application_settings.setItem('refresh', 'never');
console.log('defaults set');
}
}
Using ripple emulator I can see the 'added' comment in the console log, however never reaches the 'called' one, and if I run the application and use weinre to debug it, none of the console logs registers.
In both cases none of the keys are being generated, but I'm not getting any errors either, am I missing something? I changed the features to plugins as suggested in here PhoneGap 3.1 Build Device Is Not Defined and here http://www.raymondcamden.com/index.cfm/2013/10/1/PhoneGap-Build-and-PhoneGap-30 but it's still not working, any help is highly appreciated
You need to run on your actual device or simulator. Run on ripple chrome extension won't help you.
Adding following line help me... I have done all tries but nothing helped me so finally I went through http://docs.build.phonegap.com/en_US/#googtrans(en) Configurations block..
<plugin name="cordova-plugin-whitelist" version="1"/>
<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>
Ok after hours of debugging and testing I solved the issue, I think this can be helpful for future references to any other phonegap build users so I'm gonna list step by step guide on what I did in here. I don't know if this is the best approach though, so I'd really appreciate some feedback on things that can be improved :)
To make jQuery work with Phonegap Build and Phonegap API you need to do the following in your application's index:
Please note the API calls won't run in the emulator, you need a real device to check this out. (Thanks #Dato' Mohammad Nurdin for this valuable information)
Add a reference to the phonegap script <script src="phonegap.js"></script> ideally this can be your first script reference, it doesn't requires any library to work and you don't need to have the library itself, phonegap build will add it once it compiles the code.
Add jQuery reference (in case you need it, since I was working with jQuery Mobile I'll need it)
Device ready will take place in your index file when you'll next add the event listener, adding this in other scripts will cause some issues with the device ready event. But if you need to check the device ready status in other scripts, you can add a global variable available for all of the scripts bellow, if you don't know how you can create a script with a variable, this will make it available for all the scripts referenced after this one. Example: <script>var phonegap_ready = false</script>
add a script with your event listener
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phonegap_ready = true;
}
Add the source of jQuery Mobile and your js events and code files.
As a side note, checking for device ready while working with jQuery Mobile it's just a standard, after some test I ran, phonegap device ready fires way more faster than jQuery pageshow event (which makes sense considering all of the DOM manipulation jqm page events do) however I still recommend it just as a caution.
Once in your code you can use the deffered call $.when() to check asynchronously to not execute the phonegap calls until the phonegap framework is fully operational. As an example using the previously global variable created:
$(document).on('pageshow', '#login_page', function (parent_event) {
//do jQuery Mobile event handlings here
$.when(phonegap_ready === true).then(function () {
phonegapApiFunctionsCall();
});
});
If the features or plugins (calls to phonegap API are performed as features before Phonegap Build 3.0, and as of Phonegap Build 3.0 these were replaced for plugins) you'll be able to run the API commands from the phonegapApiFunctionsCall() and will avoid the initialization issues between phonegap deviceready event and jQuery Mobile page initialization events.
I am trying to get PhoneGap 2.4.0 FileTransfer working on Android 4.2.
I get a Logcat warning message saying:
The Source URL is not in white list: 'http://api.etc.com'
Inside my res/xml/cordova.xml I have
<access origin=".*" subdomains="true"/>
This is supposed to whitelist all URL's but no luck, I still get the same warning and FileTransfer error 3.
Any ideas? Can I check if cordova.xml is being parsed at all?
Edit: I'm using a CordovaWebView.
If you are not using DroidGap, you need:
Config.init(this);
In the onCreate of your activity. Otherwise, all whitelisting will fail. Just found this out after two hours of painful digging.
It should work if you change your XML to:
<access origin="*" subdomains="true"/>
This white-lists basically the entire internet. If you only want to white-list your domain, use something more specific. See details here:
http://docs.phonegap.com/en/2.4.0/guide_whitelist_index.md.html
The "origin" attribute is now "uri".
I managed to fix the problem by using PhoneGap 1.9.0 instead of 2.4.0. The errors return when using later versions.
I also managed to get it working by not using CordovaWebView but by using PhoneGap build. But this isn't viable in my case.
If you are using wild card in the whitelist URL configuration, don't use subdomain property.
Looks like you have to be very specific in how you write the tags in config.xml especially when it comes to allowing subdomains - apparently specifying subdomains does not work with wildcards so you need two blocks of tags.
<access origin="*.google.com" />
<access origin="*.googleapis.com" />
<access origin="*.gstatic.com" />
<access origin="*.googleusercontent.com" />
<access origin="google.com" subdomains="true"/>
<access origin="googleapis.com" subdomains="true"/>
<access origin="gstatic.com" subdomains="true"/>
<access origin="googleusercontent.com" subdomains="true"/>