我正在从事一个项目，在该项目中我大量使用了 InAppBrowser查看不同的文档(PDF、DOC、DOCX)。我在 och docs.google.com 的帮助下做到了这一点, 文档存储在 firebase-storage .
大多数情况下，它在我的 Android 设备上运行良好!但有时我得到的只是一个空白的白屏，我必须按后退按钮才能关闭InAppBrowser然后重新打开它以显示文档。
在 Chrome 开发人员工具中远程调试这种奇怪的行为时，我看到 loadstart和 loadstop事件被适本地调用:
当我看着 HTML在空/白色InAppBrowser我看到空 <body> - 标签:
我用来打开 InAppBrowser 的代码:
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { InAppBrowser, InAppBrowserObject } from '@ionic-native/in-app-browser';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { LoaderService } from './loader-service';
import * as firebase from 'firebase';
@Injectable()
export class FirebaseStorageService{
browserOptions: string;
browser: InAppBrowserObject;
constructor(
private iab: InAppBrowser,
private loaderService:LoaderService,
private platform: Platform,
private screenOrientation: ScreenOrientation
){
this.browserOptions = 'zoom=no,location=no,useWideViewPort=no,hidden=yes,enableViewportScale=yes';
}
viewPdf(path: string, loadText?:string):Promise<any>{
this.showLoader(loadText);
return new Promise<any>((resolve, reject) => {
firebase.storage().ref().child(path).getDownloadURL().then(url => {
let newURL = 'https://docs.google.com/gview?&url=' + encodeURIComponent(url);
this.startBrowser(newURL);
resolve();
})
.catch(err => {
if(this.platform.is('cordova')){
this.loaderService.dismissLoader();
}
reject(err);
});
})
}
private startBrowser(path:string):void{
this.browser = this.iab.create(path, '_blank', this.browserOptions);
if(this.platform.is('cordova')){
this.handleBrowserSubscriptions();
this.screenOrientation.unlock();
}
}
private handleBrowserSubscriptions():void{
let stopSub = this.browser.on('loadstop').subscribe(event => {
console.log('loadstop', event)
this.loaderService.dismissLoader();
this.browser.show();
stopSub.unsubscribe();
errorSub.unsubscribe();
});
let exitSub = this.browser.on('exit').subscribe(event => {
console.log('exit:',event)
this.loaderService.dismissLoader();
exitSub.unsubscribe();
this.browser.close();
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
});
let errorSub = this.browser.on('loaderror').subscribe(event => {
console.log('loaderror', event)
this.loaderService.dismissLoader();
this.browser.close();
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
stopSub.unsubscribe();
errorSub.unsubscribe();
});
let startSub = this.browser.on('loadstart').subscribe(event => {
console.log('loadstart', event);
})
}
}
ionic 信息:
Cordova CLI: 7.0.1
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed有没有其他人经历过这个，或者有没有人知道如何解决这个问题？
最佳答案
您正在使用其中一种方式在 Android 的 WebView 中打开文档
解决方案 1:
您当前的 WebView ，您可以修改如下:
encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf')
编码完整的 url，包括
https://docs.google.com这是加载网址的另一种方法:
http://docs.google.com/viewer?url=http://example.com/example.pdf
如果这些解决方案中的任何一个不起作用，请尝试下载该文件并在浏览器中打开它。
关于cordova - InAppBrowser 有时为空/空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44436227/