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、Ionic 和 Cordova，如果您需要有关项目设置的更多信息，我可以提供。

Answer 1

您可以在<app-root> Your preloader here.. </app-root>' 之间的 index.html 中使用预加载器 应用加载后preloader会被移除。