Как добавить preloader, когда inAppBrowser загружает страницы?

Question

Мне нужен предварительный загрузчик для отображения во время загрузки страницы в inAppBrowser, я пытался добавить его, используя html, css, js и методы browser.executeScript(...), browser.insertCSS(...), предварительный загрузчик появился, но после него появился был белый экран, также пытался сделать это с помощью cordova-plugin-native-spinner и cordova-plugin-dialogs, но в обоих случаях также появился белый экран. Например, я сделал это так:

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { InAppBrowser } from "@ionic-native/in-app-browser";
import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

@Component({
  template: "<p>....loading</p>"
})
export class HomePage {
  constructor(
    private iab: InAppBrowser,
    public platform: Platform,
    private spinnerDialog: SpinnerDialog) {
    platform.ready().then(() => {
      let browser = this.iab.create("https://www.google.com", "_blank", {
        location: 'no',
        clearcache: 'yes',
        clearsessioncache: 'yes'
      });

      browser.show();

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

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

Или так:

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { InAppBrowser } from "@ionic-native/in-app-browser";

@Component({
  template: "<p>....loading</p>"
})
export class HomePage {
  constructor(private iab: InAppBrowser, public platform: Platform) {
    platform.ready().then(() => {
      let browser = this.iab.create("https://www.google.com", "_blank", {
        zoom: "no",
        location: "no"
      });

      browser.show();

      browser.on("loadstart").subscribe( () => {
        browser.executeScript({
          code:
            `document.body.innerHTML = "<div class='preloader'>
              <div class='preloader__row'>
                <div class='preloader__item'></div>
                <div class='preloader__item'></div>
              </div>
            </div>"`
        });
        browser.insertCSS({
          code: `.preloader {
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: #e0e0e0;
          z-index: 1001;
        }

        .preloader__row {
          position: relative;
          top: 50%;
          left: 50%;
          width: 70px;
          height: 70px;
          margin-top: -35px;
          margin-left: -35px;
          text-align: center;
          animation: preloader-rotate 2s infinite linear;
        }

        .preloader__item {
          position: absolute;
          display: inline-block;
          top: 0;
          background-color: #337ab7;
          border-radius: 100%;
          width: 35px;
          height: 35px;
          animation: preloader-bounce 2s infinite ease-in-out;
        }

        .preloader__item:last-child {
          top: auto;
          bottom: 0;
          animation-delay: -1s;
        }

        @keyframes preloader-rotate {
          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes preloader-bounce {
          0%,
          100% {
            transform: scale(0);
          }

          50% {
            transform: scale(1);
          }
        }

        .loaded_hiding .preloader {
          transition: 0.3s opacity;
          opacity: 0;
        }

        .loaded .preloader {
          display: none;
        }`
        });
        browser.executeScript({
          code: `window.onload = function () {
            document.body.classList.add('loaded_hiding')
            window.setTimeout(function () {
              document.body.classList.add('loaded')
              document.body.classList.remove('loaded_hiding')
            }, 500)
          }`
        });
      });
    });
  }
}

Я не очень хорош в Angular, Иони c и Кордова, если вам нужно Более подробную информацию о настройках проекта я могу предоставить.

Answer 1

Вы можете использовать предварительный загрузчик в индексе. html между <app-root> Your preloader here.. </app-root>' После загрузки загруженного приложения предварительный загрузчик будет удален.