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

Question

I've completed an Ionic 4 app which utilizes the InAppBrowser and it works fine on iOS device when the target is _self but when the target is _blank the InAppBrowser attempts to load the web page but remains on a white screen.

I've installed

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

I've imported on the corresponding ts page and in app.module.ts

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

I've declared it as a provider in app.module.ts

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

Here is the code

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

Answer 1

I remember this error specifically for ios devices. The cause for me was the use of localhost:XXXX instead of a valid url where XXXX is the port number. This would happen if there is no application running on your XXXX port.

What I realised was on iOS, when you use an invalid URL like localhost:XXXX the inappbrowser is unable to render the page with 404 error. It just fails to show anything :(. On an android device you would get a 404 page saying, URL not found. But with iOS this doesnot happen. Took me a while to figure out.

Coming to your problem, if you are getting this issue with a valid working URL then check if you are connected to the internet.

Answer 2

Although the problem persists in the Ionic Dev App, it does not occur in the final app build which I've tested via TestFlight. So it appears that this is simply an Ionic Dev App issue.

Answer 3

As at today 26th Feb, 2021. using ionic 6. I encountered this problem but I found out this problem is occurring because I have built my project before adding cordova InAppBrowser plugin.

my solution

1. open your project directory. locate folder android (or iOS depending on the platform your building) and folder platform.

2. make a copy of the two folders listed above somewhere outside the project directory or you just simply rename them.

3. Open your CLI and navigate to project directory then run the following code in order.

   1. npm run build

   2. ionic capacitor add android

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

Answer 4

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