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

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

Answer 2

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

我在 iOS 上意识到，当您使用像 localhost:XXXX 这样的无效 URL 时，inappbrowser 无法呈现页面并出现 404 错误。它只是无法显示任何内容 :(。在 android 设备上，您会看到一个 404 页面，上面写着 URL not found。但是对于 iOS，这不会发生。我花了一段时间才弄清楚出。

关于您的问题，如果您在使用有效的 URL 时遇到此问题，请检查您是否已连接到互联网。

Answer 3

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

Answer 4

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

我的解决方案

打开您的项目目录。找到文件夹 android（或 iOS，具体取决于您构建的平台）和文件夹 platform.
在项目目录外的某个地方复制上面列出的两个文件夹，或者您只需重命名它们即可。
打开 CLI 并导航到项目目录，然后按顺序运行以下代码。
1. npm run build
2. ionic capacitor add android
3. ionic capacitor copy android && cd android && gradlew assembleDebug && cd ..

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

Ionic 4 - InAppBrowser not working with '_blank' - Page doesn't load

node.js

inappbrowser

ionic-framework

angular