- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在从事一个项目,在该项目中我大量使用了 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);
})
}
}
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')
https://docs.google.com
关于cordova - InAppBrowser 有时为空/空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44436227/
我使用plugman命令在cordova中创建了一个插件 它创建了所有必需的文件。然后我在插件中添加了android平台。 然后我尝试将它添加到 cordova 应用程序中。我成功添加了它,但是当我尝
我使用plugman命令在cordova中创建了一个插件 它创建了所有必需的文件。然后我在插件中添加了android平台。 然后我尝试将它添加到 cordova 应用程序中。我成功添加了它,但是当我尝
我正在尝试在较旧的 Atrix 上安装一个应用程序,在 S3 上运行良好。搜索论坛可能的问题是SDK版本较高(Atrix是4.0.4)。修复显然是在设置 API 级别。 但是当我运行 cordova
使用 cordova build在一个为期一年的项目中提出: :processDebugResources my_project/platforms/android/build/intermediat
我有一个可以创建文件的可运行应用程序。 我正在寻找一种工作后数小时从cordova应用程序中删除文件的方法。我似乎无法使其正常工作。 这是用于创建和删除文件的代码: function crea
有什么区别吗Cordova 构建 Android 和 Cordova 准备 Android 命令? Reference is added here 最佳答案 准备将您的 www Assets 和任何插
我检查了文档,但没有找到关于此命令的明确说明。 那么,有谁知道cordova prepare命令的作用是什么? 是否更新特定于平台的www文件夹? 如果是,它将复制根www的全部内容吗? 它会更新平台
我们正在开发正在使用Cordova(专用于Ionic)的移动应用程序,并且正在使用PhoneGap PushPlugin和Amazon SNS进行推送通知。反过来,这会撞到我们与Amazon SNS进
我正在使用Vue,Webpack和Cordova。 Videos 如果我在没有Cordova的情况下加载页面,并且在Firefox浏览器中,则可以使用Youtube视频上的全屏图
因此,我尝试在我的(正在运行的)Ionic应用程序中安装一个新插件,该文件名为https://ionicframework.com/docs/native/firebase-dynamic-links
我像这样安装了cordova: C:\Windows\system32>npm install -g cordova 我明白了: C:\Users\cyril\AppData\Roaming\npm\
我有一个 cordova 应用程序,我使用以下代码捕获了后退按钮: document.addEventListener("backbutton", function (e) { bac
如何在 Cordova 中的蓝牙设备和 Android/iOS 之间发送和接收一系列数据字节? 我的项目的详细信息: 我正在开发一个蓝牙传感器设备。设备以一系列字节的形式发送数据。它还对设备 API
我是 cordova 开发的新手。我使用 Onsen UI (1.2.1) 作为布局框架。ons-toolbar 上的标题有问题。 someTextHere 如果我在 ripple 上运行
我有一个启用了平台浏览器的 Cordova 应用程序。我想在 Chrome 中使用摄像头,但调用摄像头根本没有任何反馈。它在我的 Android 设备上就像一个魅力。 我通过这个命令启动:cordov
我对thid docs https://firebase.google.com/docs/android/setup#available_libraries中提到的根级和应用程序级的路径目录感到困惑
喜欢这些插件 https://github.com/ArchieGoodwin/SilentShot https://github.com/alongubkin/phonertc 他们没有 tarba
我有一个 Angular 2 应用程序,我正在将其构建到 cordova 中并部署到 Android/IOS。我没有使用 ionic,我见过许多使用 ionic 的解决方案,但我现在无法将整个项目转换
当我发出命令时,在带有 Cordova 的 Ionic 3 中: ionic cordova run android --emulate 它给出以下消息: BUILD FAILED in 3s
我无法在 ionic 5.2.4v 中安装软件包 cordova-res 并收到以下错误。 命令:cordova-res C:\hanu\cordova-res-master\cordova-res
我是一名优秀的程序员,十分优秀!