在 InAppBrowser Ionic 中加载 Spinner

Question

我正在尝试在页面加载时在 InAppBrowser 中实现 IonicLoading Spinner。这就是我正在做的：

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

控制器：

.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(); });
	
	}
})

问题是微调器不会加载到 InAppBrowser 中，而是显示在背景中（即仅当我关闭 InAppBrowser 时才可见）

任何帮助，将不胜感激。

Answer 1

我正在使用 ionic V2+ (ionic 3) 应用程序，我使用过，cordova-plugin-dialogs但它没有像我预期的那样对我有用。我使用了Spinner Dialog并且运行良好。请在下面找到示例代码

安装插件

ionic cordova plugin add cordova-plugin-native-spinner

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

代码

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();
})