CODEWITHSUNDEEP
androidangularjscordovaionic-framework
Shrey Chauhan
Shrey Chauhan

Reputation: 43

Loading Spinner inside the InAppBrowser Ionic

I am trying to implement a IonicLoading Spinner inside the InAppBrowser while the page loads. This is what i am doing:

<button class="button" ng-controller="View" ng-click="showHelp('http://www.google.com')">
</button>

Controller:

.controller('View', function($scope, $ionicLoading) {

	$scope.showHelp=function(url) {
	var ref = window.open(url, '_blank', 'location=yes');
    ref.addEventListener('loadstart', function(){ $ionicLoading.show(); }); 
	ref.addEventListener('loadstop', function() { $ionicLoading.hide(); });
	
	}
})

The issue is the spinner doesn't load inside the InAppBrowser instead it shows in the background (i.e. visible only if i close the InAppBrowser)

Any help would be appreciated.

Upvotes: 4

Views: 6770

Answers (3)

jafarbtech
jafarbtech

Reputation: 7015

As the activityStop is deprecated I recommend the following method to prevent InAppBrowser's blank opening screen

Open the InAppBrowser in hidden mode and later in loadstop event show the InAppBrowser. Till then you can show ionic loader or your custom loader

var ref = window.open(url, '_blank', 'location=yes,hidden=yes');
ref.addEventListener('loadstart', function() {
  $ionicLoading.show(); /*or `showLoader()`*/
}); //`showLoader()` is your own loader function to show loader within your app
ref.addEventListener('loadstop', function() {
  ref.show();
  $ionicLoading.hide(); /*or `hideLoader()`*/
}); //`hideLoader()` is your own loader function to hide loader within your app

Upvotes: 0

coder
coder

Reputation: 8702

I am working with ionic V2+ (ionic 3 ) app and I used cordova-plugin-dialogs but it did not work for me as I expected. I used Spinner Dialog and work well. Please find the sample code below

Installing plugin

ionic cordova plugin add cordova-plugin-native-spinner

npm install --save @ionic-native/spinner-dialog

Code

import { InAppBrowser } from '@ionic-native/in-app-browser';
import { SpinnerDialog } from '@ionic-native/spinner-dialog';

constructor(
private iab: InAppBrowser,
private spinnerDialog: SpinnerDialog) { }

...

 const browser = this.iab.create('https://www.google.com',
  '_blank',
  {
    location: 'no',
    clearcache: 'yes',
    clearsessioncache: 'yes'
  });

browser.on('loadstart').subscribe((eve) => {
  this.spinnerDialog.show(null, null, true);     
}, err => {
  this.spinnerDialog.hide();
})

browser.on('loadstop').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})

browser.on('loaderror').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})

browser.on('exit').subscribe(()=>{
  this.spinnerDialog.hide();
}, err =>{
  this.spinnerDialog.hide();
})

Upvotes: 6

Arpit Vasani
Arpit Vasani

Reputation: 1023

Because inAppBrowser stays on top of the WebView, you cannot add a Loader using HTML. You can add a native Loader after adding the cordova-plugin-dialogs plugin. Here is some code to get you started:

To start loading:

navigator.notification.activityStart("Please Wait", "Its loading.....");

To stop Loader:

navigator.notification.activityStop();

If you need more information, check this reference.

Upvotes: 3

Related Questions