I am using Cordova and InAppBrowser plugin to see external links in my app(android). But when device doesn't have connection and I am trying to go for external link it shows Android error(see image).
Question:
How to change this standard error page (standard error image) to my custom error page?
Thanks a lot
Use like this :
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
if(navigator.onLine) {
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.show();
} else {
//create page in folder www like index2.html and include
alert("No Internet Pleas active your internet");
window.location = "index2.html";
}
}
Related
I have a link that opens in the inappbrowser and when I proceed with the webpage that is loaded in the inappbrowser , any other link should not get opened if one link is already running in inappbrowser.
Whereas when I click other link, it loads over the previous running link and I clearly do not want that
Any help is much appreciated!
Here is the source code:
universalLinks.subscribe(null, function (eventData) {
ref = cordova.InAppBrowser.open(eventData.url, '_blank', 'location=yes');
setTimeout(function () {
ref.close();
}, 320000);
});
I am fairly new to Ionic and Cordova and I am using Cordova to create an application.
I've written code to open an InAppBrowser window in order to share a link via Google+.
My code works fine however, once the user has shared the link they are redirected in the InAppBrowser to their Google+ page. How would I go about closing the InAppBrowser window after the user has successfully shared their post?
$scope.googleShare = function(url){
var siteToShare = "https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo rawurlencode("+url+")";
var options = "location=no,toolbar=yes,toolbarposition=top"
var ref = window.open(siteToShare, '_blank', options);
ref.addEventListener('loadstop', function(event){
if(event.url.match("mobile/close")){
ref.close();
}
})
console.log(siteToShare);
}
You can automatically close the InAppBrowser by listening for the loadstart event, which is fired whenever the browser starts loading a new page. If you use loadstop, the user will see that the browser goes to a different page.
The following code is an example as to how you can close the browser using the loadstart event. All you have to do is replace "part of URL here" with whatever works for you.
ref.addEventListener('loadstart', function(event) {
if(event.url.indexOf("part of URL here") > -1) {
ref.close();
}
});
I need to hit an API endpoint, which returns a pdf file (not a url to a pdf, but the actual data), then somehow display this pdf in my ionic application. Ideally, I'd like to just give it to some other application like the phone's mobile web browser but I'd be open to trying to embed it within my app as well. On iOS, I just use $window.open(url) and mobile safari knows to download and display the pdf that is returned. However, Android tries to download the file then tells me that it can't be opened when I try to open it.
I've also tried embedding it in the app with <embed> but nothing gets embedded. However, a similar method works with images in <img ng-src="url">.
I've also tried messing around with cordova FileOpener2 but am having a lot of trouble getting anything to work in that. If that's the right way to do this, I'd be open to re-visiting that method.
The closest I've gotten is definitely just sending it to the devices mobile browser as that works perfectly on iOS.
I solved it using filetransfer and fileopener2. My code is below. The main issues I ran into was not having <access origin="cdvfile://*" /> in my config.xml file and not having ngCordova installed correctly.
if (ionic.Platform.isIOS())
$window.open(APIUrl, '_blank', 'location=no');
else if (ionic.Platform.isAndroid()) {
var fileExtension = filename.substr(filename.lastIndexOf('.')+1);
//I have a dictionary with this somewhere else
var MIMEType = extToMime[fileExtension];
var uri = encodeURI(APIurl);
var fileURL = "cdvfile://localhost/persistent/file."+fileExtension;
$cordovaFileTransfer.download(uri, fileURL, {}, true)
.then(function(result) {
$cordovaFileOpener2.open(
fileURL,
MIMEType
).then(function() {
console.log("SUCCESS");
}, function(e) {
console.log("ERROR");
console.log(JSON.stringify(e));
});
}, function(e) {
console.log("Error: " + JSON.stringify(e));
});
}
I have a website that I want to enhance on mobiles with a hybrid app. Ideally the app would load the remote site over http but load the platform specific code locally. I've tried to set up a Cordova project to do this but am having lots of trouble. Cordova 4.3.1, Cordova Android 3.7.2 on a Nexus 7 Android 4.4.4 has been my environment. (The google maps plugin is for Cordova Android < 4.)
If I try to load file:///android_assets/www/cordova.js from an http site, chromium says Not allowed to load local resource. I tried to set up a local URL scheme but don't know what android-specific code to put where.
Is this the right way to make a hybrid app? Is there a cordova plugin to allow loading file: from http:?
I also tried using an iframe and passing messages to indicate cordova is enabled and which plugins are installed, but I don't want to deal with having the http server re-serve the same js files that are already available locally.
I also thought to download the website and access it over file: but I imagine I will have the same problem trying to access http resources.
I am able to load local cordova.js on remote html using cordova-plugin-file (cdvfile://) plugin .
Add cordova-plugin-file plugin to your cordova project
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/
Confirm cdvfile URI for cordova.js using below sample code(Android example)
checkCordovaJSPath('file:///android_asset/www/cordova.js');
function checkCordovaJSPath(jsUri) {
window.resolveLocalFileSystemURL(jsUri, function success(fileEntry){
console.log("got cordova.js file: " + fileEntry.fullPath);
console.log('cordova.js cdvfile URI: ' + fileEntry.toInternalURL());
});
}
Load cordova.js using cdvfile://localhost on remote html.
<script type="text/javascript" src="cdvfile://localhost/assets/www/cordova.js"/>
I don't know if this is the right way to make a hybrid app, but I got it working by serving assets over http with https://github.com/floatinghotpot/cordova-httpd .
On the local page bundled with the app I have added:
<script type="text/javascript">
document.addEventListener("deviceready", function () {
var httpd = cordova.plugins.CorHttpd;
httpd.startServer({
'www_root': '',
'port': 8080,
'localhost_only': false
}, function (url) {
// if server is up, it will return the url of http://<server ip>:port/
// the ip is the active network connection
// if no wifi or no cell, "127.0.0.1" will be returned.
document.getElementById('url').innerHTML = "server is started: <a href='" + url + "' target='_blank'>" + url + "</a>";
location.replace('http://192.168.0.134:9090/homechooser/beta/#' + JSON.stringify({'cordova.js': url + '/cordova.js'}));
}, function (error) {
document.getElementById('url').innerHTML = 'failed to start server: ' + error;
});
}, false);
</script>
<div id="url"></div>
Then on the remote webpage I have added:
(function () {
var hash;
if (location && location.hash)
try {
hash = JSON.parse(location.hash.substring(1));
} catch (e) {
}
if (hash && hash['cordova.js'])
$.getScript(hash['cordova.js'], function () {
alert("Running cordova.js");
});
})();
now to see if cordova can actually be used this way...
The cdvfile solution will not work for active content (js files) because of the mixed content policy. Here is how to make it work:
For android: Disable mixed content policy by putting the following code inside the pluginInitialize method of your cordova plugin:
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
final WebSettings settings = ((WebView)this.webView.getView()).getSettings();
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
https://developer.android.com/reference/android/webkit/WebSettings.html#MIXED_CONTENT_ALWAYS_ALLOW)
Then include local cordova.js using:
<script src="cdvfile://localhost/assets/www/cordova.js"></script>
For ios: I submitted a PR to the file plugin which solves the mixed content problem on ios: apache/cordova-plugin-file#296 The fixed version is available at: https://github.com/guylando/cordova-plugin-file If you load a remote site https://example.com on the webview then it allows to access local files using the url: https://example.com/cdvfile/bundle/www/cordova.js instead of cdvfile://localhost/bundle/www/cordova.js And by this solves the mixed content problems
Include local cordova.js using:
<script src="/cdvfile/bundle/www/cordova.js"></script>
Thing is your are trying to load a web-url on the local hosted app, imagine doing the same thing on Native Android App, what would you do? you will place a web-client or a web-browser in your app. But Cordova/Phonegap already uses Web-Browser to render your pages. So its like a using web-browser inside a web browser.
You need to install InAppBrowser which will give you the ability to load 3rd party hosted web pages.
Sample Code
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var ref = window.open('http://yourWebPage.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });
}
I am trying to open en external url from a local html file. For example, i am using super.loadUrl("file:///android_asset/www/index.html"); to call local file and the application opens it in the browser provided by DroidGap. However, there is a problem with the external url. In index.html, i am trying to reach http://www.google.com via an image button and the device opens another browser to show www.google.com (in my device, chrome is opening to show the page www.google.com). I want to let DroidGap browser to open both external and local urls in DroidGap browser.
I have achieved this because I needed the same solution. I assume you already know how to load the local file but just in case ...
//By "SomeLocalFile.html" I mean an html file in the /www/ folder of the actual app installation **not** on the server
var ref = window.open('somelocalfile.html', '_blank', 'location=no');
First Add and event listener like this to the main js of your app from which you are calling var ref = window.open().
ref.addEventListener('loadstart', LoadStart); // in YourMainJs.js
Then create a local file called closeInAppBrowser.html some where in your /www/ folder it just so happens that mines is in /www/pages/
Now define the LoadStart function so that when the page starts to load LoadStart() will fire
//I use match(/[^/]+$/g) because I find that matching the file name is just easier than the path.
// This code is place in in YourMainJs.js
fileName = event.url.match(/[^/]+$/g);
if(fileName[0] == "closeInAppBrowser.html"){
// alert("fun load stop runs");
ref.close();
}
Now in the SomeLocalFile.html that you are going to use window.open() with, place a link and js like this.
// in SomeLocalFile.html that was called via the window.open()
<a class="close">Close This Window Like A BOSS!</a>
$('.close').click(function(){
//We use window location cause you can't navigate to any other local file just by using an href in an <a> tag
//We aslo use ../../ because that is the correct path usage from within InAppBrowser to another local file
window.location = '../../pages/closeInAppBrowser.html';
});
Now when you click the link it will attempt to navigate to closeInAppBrowser.html this will trigger LoadStart() and it will check if the event.url file name matches "closeInAppBrowser.html" and if so it will close the window.
I have tested this and it works 100%. Let me know if you have any other questions
Actually there is no need to use child browser plugin, if you upgrade phonegap to 2.3.0 or above, so that you can use InAppBrowser
sample
var ref = window.open(authorize_url, '_blank', 'location=no');
ref.addEventListener('loadstart', function() { me.locChanged(event.url,ref); });