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();