我需要一个预加载器以在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,如果您需要有关项目设置的更多信息,我可以提供。
您可以在<app-root> Your preloader here.. </app-root>'
之间的index.html中使用预加载器应用加载后,预加载器将被删除。