I am trying to force the links in my app to open in external browser. I am working with jQuery mobile & Phonegap build.
My app has a page with generated contact details. Among the details there is an link to the person's website:
row+='<div class="accWWW"> '+ data[i].website +'</div>';
I have these 2 functions defined in my code.
//function which forces open in browser
function openBrowser(url){
if(device.platform === 'Android') {
navigator.app.loadUrl(url, {openExternal:true});
} else {
window.open(url, '_system');
}
}
//opens generated URL's
function openGenerated(obj){
var url = obj.getAttribute("href");
console.log(url);
openBrowser(url);
return false;
}
I also have a simple <div class="accWWW"> Google </div> set in my index.html
So... this link to Google opens perfectly in iOS (haven't yet tested on Android because iOS was my biggest problem), but the generated link wouldn't do anything if I hadn't added the openGenerated function. Now there is an action, but it opens inside the app.
Do you have any idea why that is?
Also when checking on the laptop I get these errors in the console( link is my development url):
Uncaught ReferenceError: device is not defined *link*:277 // makes sense probably, because I am not using a mobile device
Uncaught SecurityError: Blocked a frame with origin "http://www.test.com" from accessing a frame with origin "*link*". Protocols, domains, and ports must match.// what is this?
I was thinking maybe it's an access issue, but I added <access origin="*" browserOnly="true" /> in my config.xml, so there shouldn't be a problem with this.
LATER EDIT: On Android the Google link doesn't work at all and the generated one opens inside the app... Apparently device.platform is always null, but the device plugin is added in xml as I can see in phonegap build this list of plugins:
Installed Plugins
Apps will be built with the latest version of a plugin unless you lock the version in your config.xml (see below). -- Plugin installed as a dependency of another plugin
Third Party VERSION LATEST VERSION
com.phonegap.plugin.statusbar 1.1.0 1.1.0
PhoneGap Core
org.apache.cordova.device 0.2.8 0.2.8
org.apache.cordova.inappbrowser 0.3.3 0.3.3
LATER EDIT:
Device.platform doesn't seem to be working, so I modified my function, adding Ved's suggestion, to:
function openBrowser(url){
if(navigator.app)
navigator.app.loadUrl(url, {openExternal:true});
else {
var ref = window.open(url, '_system', 'location=no');
ref.addEventListener('loadstart', function(event) {
});
ref.addEventListener('loadstop', function(event) {
console.log(event.type + ' - ' + event.url);
});
ref.addEventListener('exit', function(event) {
});
}
}
on iOS still opens inside the app. For Android I think it's working fine.
I fixed my issue.
I was adding cordova.js in my html. Apparently this broke things.
Related
I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane
I need to know is if I can, from an HTML web open an application that is installed on the mobile device. Is this possible? I could do with help of plugins can open installed applications from a single application, but from the browser?
I'm also working on Android and iOS with ionic framework
I hope you're talking about the Ionic Framework hybrid mobile application.
It can be done easily using Cordova InAppBrowser plugin. Using this plugin you can execute external app or open link inside a browser if mentioned app don't exist.
You will want to do something like this:
var scheme;
// Don't forget to add the org.apache.cordova.device plugin!
if(device.platform === 'iOS') {
scheme = 'twitter://';
}
else if(device.platform === 'Android') {
scheme = 'com.twitter.android';
}
appAvailability.check(
scheme, // URI Scheme
function() { // Success callback
window.open('twitter://user?screen_name=gajotres', '_system', 'location=no');
console.log('Twitter is available');
},
function() { // Error callback
window.open('https://twitter.com/gajotres', '_system', 'location=no');
console.log('Twitter is not available');
}
);
This example will try to execute Twitter app, if that app don't exist it will open twitter inside a child browser.
Needed Cordova plugins:
cordova plugin add com.lampa.startapp
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add org.apache.cordova.device
Read more about it here: http://www.gajotres.net/how-to-launch-external-application-with-ionic-framework/
I've written a small application to test the working of cordova app on XDK.
The source code is same as this question
However, I am attaching the code here :
(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Login */
$(document).on("click", ".uib_w_9", function(evt)
{
//intel.xdk.notification.showBusyIndicator();
/*$.post("http://url/test.php", {test:'1'},
function(res){
alert(res);
}
);*/
$.ajax({
beforeSend: function(){
intel.xdk.notification.showBusyIndicator();
},
type: "GET",
url: 'http://url/test.php',
data:{test:'1'},
success: function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
error:function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
dataType: 'text'
});
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
This is the JS file of the application.
The screenshot of the app in XDK emulator :
Now When I do a build of the app using XDK cloud, I get a .apk file.
On uploading the file to GenyMotion Emulator, screen below :
The click doesn't do anything, nor does the showBusyIndicator() show, nor the alert appear.
What am I missing and what is going wrong ?
I've plans to use this ide for a proper project and hence the testing, some help will be appreciated.
UPDATE
I did a Cordova Hybrid App build initially and that caused the problem.
When I did a legacy android build, then the problem was solved.
So what do I need to do to get it to work with the Cordova Build ?
Build Page :
There is a known issue with AJAX when Intel XDK builds apk with Cordova CLI version 4.1.2. on Android version > 4.4
There is a workaround, go to Project Settings -> Build Settings -> Android, change Cordova CLI version from 4.1.2 to 3.5 and AJAX should work.
I am trying to connect to server for fetching data using ajax call inside phonegap app.
But I am getting status 404 for every request I tried google.com, 10.0.2.2 (localhost on android).
Here are steps I followed for creating application
I created template application using phonegap command line as phonegap create my-app
Running application using phonegap run android ( This shows "device is ready" screen on emulator )
Added following code for making an Ajax call to index.js - receivedEvent function
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
console.log('rdy state - '+ xmlhttp.readyState);
console.log('status - '+ xmlhttp.status);
console.log('text status - '+ xmlhttp.statusText);
console.log('Response Text - '+ xmlhttp.responseText);
}
xmlhttp.open("GET","http://10.0.2.2/", true);
xmlhttp.send();
I can access http://10.0.2.2 from emulator browser.
Here is Enviornment I am using
Phonegap version - 3.4.0-0.19.8
Android version - 4.4.2
-- Vishal
Did you put an access token in your config.xml? Try to put
<access origin="*"/>
into your config.xml.
* gives access to all domain.
Look up http://docs.phonegap.com/en/3.4.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide for further information.
Despite you have:
<pre> <access origin="*"/> </pre> in config.xml
You need to add the whitelist to your phonegap(cordova) project:
phonegap plugin add cordova-plugin-whitelist
After this your app will no longer give 404.
Has anyone gotten the clipboard plugin to work with "PhoneGap Build"?
I can't get it to work. I'm currently useing phonegap 3.1.0
My app is for android and IOS. I've only tested the clipboard plugin on android so far, and it isn't working.
in my config.xml:
<gap:plugin name="com.verso.cordova.clipboard" />
in my javascript:
window.plugins.clipboard.copy('some text',function(){alert('success');},function(response){alert('error:' + response);});
window.plugins.clipboard.paste(function(text){alert('paste success:' + text);},function(response){alert('paste error:' + response);});
The way I have it above, the script runs, but for both the copy and paste calls, the error function is executed and the response is "Class not found".
I have tried the above call window.plugins.copy, cordova.plugins.copy
both of those just cause the script to abort.
phonegap is loading just fine and the deviceready function has already fired before I attempt the above calls.
Under the plugins tab on the phonegap build webpage for my app:
Installed 3rd Party Plugins
com.verso.cordova.clipboard 0.1.0
This appears to be unrelated to the copy/paste plugin. In phonegap 3.1 you have to reference all the phonegap plugins you want to use. In this case, I'm guessing you have a function that checks if the user has an internet connection? If so, you need to add to your config.xml