How to use Cordova InAppBrowser in Ionic 4 to Open External URLs
Receive new Ionic 4 tutorials.
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
--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:
cordova.InAppBrowser.open(url, 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 DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:Follow @ahmedbouchefra
About the author
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.
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial