I am working on an application, and I am facing a problem with Ionic1 , and it concerns opening a .PDF from an external URL in Android with Ionic.
I tried many solutions given in this site and other sites but in vain.
this is an example of what I have tried:
in .html file:
<a class="item" href="#" onclick="window.open('http://www.xxx.pdf', '_system', 'location=yes')">
in .js file:
var ref = window.open('http://www.xxx.pdf', '_blank', 'location=yes');
can you suggest other solutions please?
You could use the cordova inapp browser plugin.
you can replace all window.open by inappBrowser;
window.open = cordova.InAppBrowser.open;
or you can just use:
cordova.InAppBrowser.open('http://linktopdf.pdf', '_blank', 'location=yes');
or if you use ngCordova, you can use $cordovaInAppBrowser,
$cordovaInAppBrowser.open('http://www.xxx.pdf', '_blank', options)
take a look here: http://ngcordova.com/docs/plugins/inAppBrowser/
Related
I have a iOS and Android application, and I load a external website inside my app (this external website is mine too).
My problem is that this website has a file upload feature and this feature does not work on Android (it works on iOS).
I saw that this behavior is normal on Android, but is there any way to make it work or it's definitely not an option ?
Thank you
EDIT 1
I tried to create a new app with a simple page like this (hosted on AWS) :
<html>
<head>
<title>Upload Test !</title>
</head>
<body>
<div>Upload Test</div>
<div>
<input type="file" id="imgFile" name="files[]" accept="image/x-png, image/gif, image/jpeg">
</div>
</body>
and I added this script in my generated index.html in my Cordova project.
<script type="text/javascript">
document.addEventListener("deviceready", function(event) {
console.log('TEST CONSOLE LOG !');
var url = 'https://s3-eu-west-1.amazonaws.com/***/file-upload.html';
ref = window.open(url, "_blank", "location=no,toolbar=no,zoom=no,hidden=yes");
ref.addEventListener('loadstop', function () {
ref.show();
});
ref.addEventListener('loaderror', function () {
ref.close();
ref = undefined;
});
}, false);
</script>
It doesn't work on my nexus 5 (android M).
There's an issue with both Android and iOS that prevents file uploads when clicking on a file input tag like this within the inappbrowser:
<input type="file">
There's a couple of fixes for both which I've consolidated into a single location to make it easy for anyone else facing this issue. You should be able to modify your config.xml file to use it by including this:
<plugin spec="https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git" version="1.1.0" source="git" />
Instead of the default inappbrowser plugin.
More details can be found here:
https://github.com/jverlee/cordova-plugin-inappbrowser-camera
#Verl's code is pretty good! However, it cannot be installed through his installation guide... So here is mine:
cordova plugin remove cordova-plugin-inappbrowser-camera
cordova plugin add https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git
By the way, if I follow his guide, I only gets:
Error: Cannot read property 'variables' of undefined
I have this code to open a browser on an Ionic App
<a href="#" class="button button-block"
ng-click="register()">Registrarse</a>
And in the controller
$scope.register = function () {
window.open('http://my.website.com/register', '_self', 'location:yes');
return false;
};
I tried with this too (after installing inAppBrowser plugin):
$scope.register = function () {
$cordova.inappbrowser.open('http://my.website.com/register', '_self', 'location:yes');
return false;
};
It works in Android, but if I want this to run on iOS I need to install de Cordova inAppBrowser plugin.
The problem? When I install this plugin it works on iOS but not on Android :(
Are there any solution for this issue? I found a lot of "solutions" by searching on google, but without success...
Any idea will be highly appreciated!
I installed phonegap and then I installed cordova from cmd using npm (nodejs)
I have phonegap 3.5
My problem is document.addEventListener deviceready is not working in index.html
I also add alert in my index.js at this :
onDeviceReady: function() {
app.receivedEvent('deviceready');
alert('test ready');
},
which is also not working.
I copied cordova.js from "platforms\android\assets\www to my index.html
what is app.initialize(); and what's the link between index.js and app.initialize();
Can someone explain or any link with all details?
I have to put app.initialize(); in index.js?
Thank you..
This Questions imply that you have not read the Cordova Documentation. Please read this first.
You have to build your project via your terminal/console, and not just make a copy of files into a folder.
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.
I am trying to use the PhoneGap Share plugin for 2.0 version. I have implemented it but this is not work properly.
This plugin is written in PhoneGap 1.0 and later version any new or updated plugin for share message on Facebook.
I've referred to this documentation and this question: How to implement facebook send, twitter share, send sms, send email in my phonegap android application?
But still not getting proper solution.
I am sharing my code which is working fine.
Please refer This link for share plugin functionality and follow below given steps.
1- Place the JS file in the same folder of the MainActivity.java folder.
2- Place the Js file in the www folder and add it to the index.html folder.
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
4 - add html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/libs/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/libs/jq_min.js"></script>
<script src="js/libs/share.js">
</script>
<script>
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}
//share plugin for update status
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {
alert("sent success");}, // Success function
function() {alert('Share failed')} // Failure function
);
};
//Send message on facebook
$(document).ready(function() {
$("button#sendFacebook").click(function(){
var txtsub = $("input#txtsub").attr("value");
var txtmsg = $("#txtmsg").val();
share(txtsub, txtmsg);
});
});
</script>
</head>
<body>
<input id="txtsub" type="text" placeholder="Enter Subject" maxlength="20" required /><br/><br/>
<textarea placeholder="Enter Message" id="txtmsg" rows="4" cols="25"></textarea><br/>
<button id="sendFacebook">Update Status </button>
</body>
</html>
and test this plugin for Face book,twitter,gmail etc.
& enjoy :).
Let me know if you have any query.
it seems that you are not implementing the plugin in a proper way, just try the following steps:
1- Put the java file in the same folder of the MainActivity.java
2- Put the Js file in the www folder and add it to the index.html
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
<plugin name="Share" value="Path_Of_Your_Project.share.Share"/>
4- Just write the following into your JS file:
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {}, // Success function
function() {alert('Share failed')} // Failure function
);
};
To Call the function:
$("#share_id").onClick(function(){
share("subject", "text");
});
As simple as this.