Menu
I am trying to display a loading indicator in Phonegap InAppBrowser when a page is loading using the following code:
var ref;
ref = window.open('http://www.google.com', '_top', 'location=no');
ref.addEventListener('loadstart', function(event) {
//navigator.splashscreen.show();
navigator.notification.activityStart("", "loading");
});
ref.addEventListener('loadstop', function(event) {
//navigator.splashscreen.hide();
navigator.notification.activityStop();
});
It doesn't display the indicator. I think that the z-index is lower then z-index of InAppBrowser.
If I use a splash screen instead of loading indicator it works.
840
The InAppBrowser is a web browser view that displays when calling [window. open](window. open. html)() , or when opening a link formed as <a target="_blank"> . var ref = window.
We can define the InAppBrowser as a native Cordova plugin that mainly used to add an in-app browser for any of the hybrid mobile applications. By using the InAppBrowser, we can open an external link from the Cordova application. It can easily load a webpage inside the Cordova app.
There is no action to close the InAppBrowser. How can we achieve this? The user is redirected to an aws login page in the IAB and after suscessfull login the IAB should close and the user should be redirected to a screen in the app.
You can open InAppBrowser in hidden mode, meanwhile display a spinner, and when it finishes loading hide the spinner and show the InAppBrowser:
showSpinner() // implement by yourself
var popup = window.open(url, "_blank", "location=no,toolbar=no,hidden=yes");
popup.addEventListener("loadstop", function() {
popup.show();
hideSpinner(); // implement by yourself
});
For me, hiding inappbrowser was giving some uncaught error if the page being loaded redirects to another! I had to keep the inappbrowser visible. I was able to inject a spinner to the inappbrowser for improving the user experience by avoiding the awkward white screen.
Custom Spinner
following solution has many alternatives, one can use an html file 'spinner.html' instead of hard-coding the code, but this specific approach is working across platform (nexus 5, pixel 1/2, iphone 6,7)
//use some really slow page for testing
var path="https://www.facebook.com/";
//if you have a spinner.html, you can load that instead of path here in inappbrowser, but make sure it works in all devices.
var ref = cordova.InAppBrowser.open(path, '_blank', 'toolbarposition=top,closebuttoncaption=Back,location=no,hardwareback=no');
//spinner html
var spinner ="<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'><style>.loader {position: absolute; margin-left: -2em; left: 50%; top: 50%; margin-top: -2em; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 50px; height: 50px; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform:rotate(360deg); }}</style></head><body><div class='loader'></div></body></html>";
//intended webpage is loaded here (facebook)
ref.executeScript({code: "(function() {document.write(\""+spinner+"\");window.location.href='"+path+"';})()"});
//loadstop event
ref.addEventListener('loadstart', function(event) {
//nothing specific needed for spinner
});
//loadstop event
ref.addEventListener('loadstop', function(event) {
//nothing specific needed for spinner
});
spinner will be overwritten by the actual page once it starts loading.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
