我正在开发一个项目,我在其中大量使用InAppBrowser来查看不同的文档(PDF,DOC,DOCX).我使用help doc docs.google.com执行此操作,文档存储在firebase-storage中.
大部分时间它在我的 Android设备上运行良好!但有时我得到的只是一个空的白色屏幕,我必须按后退按钮关闭InAppBrowser,然后重新打开它以显示文档.
大部分时间它在我的 Android设备上运行良好!但有时我得到的只是一个空的白色屏幕,我必须按后退按钮关闭InAppBrowser,然后重新打开它以显示文档.
在Chrome开发人员工具中远程调试这种奇怪的行为时,我看到loadstart和loadstop事件被正确调用:
当我在空白/白色InAppBrowser中查看HTML时,我看到空< body> -tags:
用于打开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); }) } }
离子信息:
Cordova CLI:7.0.1
离子框架版本:3.2.0
离子CLI版本:2.2.1
Ionic App Lib版本:2.2.0
Ionic App Scripts版本:1.3.7
ios-deploy版本:未安装
ios-sim版:未安装
操作系统:Windows 10
节点版本:v6.9.4
Xcode版本:未安装
有没有其他人经历过这个,或者有谁知道如何解决这个问题?
解决方法
您正在使用其中一种方式在Android的Web视图中打开文档
方案1:
您当前的网页视图,您可以修改如下:
encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf')
编码完整网址,包括https://docs.google.com
这是加载网址的另一种方法:
http://docs.google.com/viewer?url=http://example.com/example.pdf
如果任何此解决方案无效,请尝试下载该文件并在浏览器中打开它.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。