Ionic 4 - InAppBrowser 不使用“_blank” - 页面无法加载

Question

我已经完成了一个使用 InAppBrowser 的 Ionic 4 应用程序，当目标是 _self 时，它在 iOS 设备上运行良好，但当目标是 _blank 时，InAppBrowser 尝试加载网页，但仍停留在白屏上。

我已经安装了

 ionic cordova plugin add cordova-plugin-inappbrowser
 npm install @ionic-native/in-app-browser

我已经在相应的 ts 页面和 app.module.ts 中导入

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

我已在 app.module.ts 中将其声明为提供者

providers: [
InAppBrowser,
StatusBar,
SplashScreen,
CallNumber,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],

这是代码

const browser = this.iab.create('https://www.google.com', '_blank');
browser.show();

Answer 1

我记得这个错误专门针对 ios 设备。 我的原因是使用localhost:XXXX而不是有效的 URL，其中 XXXX 是端口号。 如果您的 XXXX 端口上没有运行应用程序，就会发生这种情况。

我意识到在 iOS 上，当您使用像 localhost:XXXX 这样的无效 URL 时， inappbrowser无法呈现带有 404 错误的页面。 它只是没有显示任何内容:(。在 Android 设备上，您会看到一个 404 页面，说找不到 URL。但在 iOS 中，这不会发生。我花了一段时间才弄清楚。

谈到您的问题，如果您使用有效的工作 URL 遇到此问题，请检查您是否已连接到互联网。

Answer 2

尽管问题在 Ionic Dev App 中仍然存在，但在我通过 TestFlight 测试的最终应用程序版本中并没有出现。 所以看起来这只是一个 Ionic Dev App 问题。

Answer 3

截至今天 2021 年 2 月 26 日。使用 ionic 6。我遇到了这个问题，但我发现这个问题正在发生，因为我在添加cordova InAppBrowser 插件之前已经构建了我的项目。

我的解决方案

1. 打开你的项目目录。 找到文件夹 android（或 iOS，具体取决于您构建的平台）和文件夹平台。

2. 在项目目录之外的某处复制上面列出的两个文件夹，或者您只需重命名它们。

3. 打开您的 CLI 并导航到项目目录，然后按顺序运行以下代码。

   1. npm run build

   2. ionic capacitor add android

   3. ionic capacitor copy android && cd android && gradlew assembleDebug && cd ..

Answer 4

您不需要添加以下代码browser.show();