Cordova InAppBrowser Loading Spinner for Android

Question

I've an app built with cordova and InAppBrowser. I'm trying to show a "loading spinner" in every page. In iOS it's working well on every page I load, but Android fails. On iOS I just edited self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray] this line in CDVInappBrowser.m and works. Does Android have a similar feature ?

Here is my code:

       // Cordova is ready
        function onDeviceReady() {

            var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no", "toolbar=no", "closebuttoncaption=a", "EnableViewPortScale=no");

            navigator.notification.activityStart("Loading", "Loading...");
            setTimeout(function(){
                navigator.notification.activityStop();
            }, 5000);
         }

Answer 1

Check this plugin: https://github.com/Paldom/SpinnerDialog

Working for me in Android. You should use this method to show a spinner with title and message:

window.plugins.spinnerDialog.show("Loading","Loading...");

Your code would be:

  function onDeviceReady() {

        var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no", "toolbar=no", "closebuttoncaption=a", "EnableViewPortScale=no");

        window.plugins.spinnerDialog.show("Loading","Loading...");
        setTimeout(function(){
            window.plugins.spinnerDialog.hide();
        }, 5000);
  }

Answer 2

Resvolvi dessa forma

//window.open Example

 // Wait for device API libraries to load
   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() {
    // external url
   // var ref = window.open(encodeURI('http://mfsom.com.br/'), '_blank', 'location=no','toolbar=no');
   //relative document
     ref = window.open('http://mfsom.com.br/','_self',',location=no');

ref.addEventListener('loadstart', loadstartCallback);
ref.addEventListener('loadstop', loadstopCallback);
ref.addEventListener('loadloaderror', loaderrorCallback);
ref.addEventListener('exit', exitCallback);

function loadstartCallback(event) {

    showSpinnerDialog();

}

function loadstopCallback(event) {
    hideSpinnerDialog();
}

function loaderrorCallback(error) {
console.log('Erro ao carregar: ' + error.message)

}

function exitCallback() {
console.log('O navegador está fechado...')

}

function showSpinnerDialog() {
navigator.notification.activityStart("Carregando..");
//$.mobile.loading("show");
}

function hideSpinnerDialog() {
navigator.notification.activityStop();
    //$.mobile.loading("hide");
}

// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );

// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.

};

Answer 3

As both the answers here use the activityStop() which is deprecated, use your own spinner which you use in your app to prevent InAppBrowser 's blank opening screen

Open the InAppBrowser in using hidden=yes option and later in loadstop event listener show the InAppBrowser . Till then you can show your custom loader

var ref = window.open("http://m.estadao.com.br/?load-all=true", "_blank", "location=no,toolbar=no,closebuttoncaption=a,EnableViewPortScale=no,hidden=yes");
ref.addEventListener('loadstart', function() {
  showLoader();//`showLoader()` is your own loader function to show loader within your app
});
ref.addEventListener('loadstop', function() {
  ref.show();
  hideLoader();//`hideLoader()` is your own loader function to hide loader within your app
});