个人中心
gpt4 book ai didi

cordova - InAppBrowser 有时为空/空白

转载 作者：行者123 更新时间：2023-12-04 21:33:38 28 4
gpt4 key购买 nike

我正在从事一个项目，在该项目中我大量使用了 InAppBrowser查看不同的文档(PDF、DOC、DOCX)。我在 och docs.google.com 的帮助下做到了这一点, 文档存储在 firebase-storage .
大多数情况下，它在我的 Android 设备上运行良好!但有时我得到的只是一个空白的白屏，我必须按后退按钮才能关闭InAppBrowser然后重新打开它以显示文档。

在 Chrome 开发人员工具中远程调试这种奇怪的行为时，我看到 loadstart和 loadstop事件被适本地调用:

Chrome developer tools, when remotely debugging the app, while opening InAppBrowser

当我看着 HTML在空/白色InAppBrowser我看到空 <body> - 标签:

Chrome developer tools, looking at the HTML for the empty white InAppBrowser

我用来打开 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/

28 4 0
文章推荐： google-cloud-sql - mysql 客户端连接 gcloud
文章推荐： awk - SED 在删除后不处理 {} 中的多个命令)、追加)或更改)
文章推荐： docker - 简单的 docker 容器 : Build dedicated image or mount config as volume?
文章推荐： r - 绘制轴和数据框之间的日期不一致
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com