How to use Cordova InAppBrowser in Ionic 4 to Open External URLs

In this tutorial, we are going to learn how to use the Apache Cordova plugin InAppBrowser to launch external websites in Ionic 4.

We are going to start the tutorial by creating a new Ionic 4 project using the Ionic CLI 4. In your terminal, run the following command:

$ ionic start myApp blank --type=angular
$ cd myApp
$ ionic platform add android

The --type=angular option tells ionic CLI to scaffold an Ionic 4 project based on Angular. This is necessary because Ionic 4 is now framework agnostic.

Since We are using a Linux/Ubuntu system, we can only build for Android. In case you are using a macOS system you can also target iOS and you can add the iOS platform using the following command:

$ ionic platform add ios

Next, let's add the InAppBrowser Cordova plugin that allows you to launch external URLs inside your Ionic 4 mobile appliation. In your terminal, run the following command:

$ cordova plugin add cordova-plugin-inappbrowser

The InAppBrowser plugin provides a web browser view which behaves like any regular web browser but inside your Ionic application.

The InAppBrowser plugin allows you to open, external URLs instead of using the main cordova web view. It provides its own control buttons instead of your app controls and it has a simple API since it's only needed for opening external URLs.

After making sure the Cordova platform is ready, you can call the following method to open URLs:, target, options); 
  • url: Contains the external url to load.

  • target: Defines how InAppBrowser will open the url which has three options:

    • _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
    • _blank: Opens in the InAppBrowser.
    • _system: Opens in the system's web browser.
  • options: Provides options for InAppBrowser ,one common options supported by all platforms is location which displays or hides the InAppBrowse location bar ,the default value of options is the string location=yes


That's all for this small tutorial which just shows you how to use the Cordova plugin inappbrowser to launch external urls.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status