How to use InAppBrowser with Ionic 2 to launch external websites urls
In this tutorial,we are going to learn how to use the Apache Cordova plugin InAppBrowser to launch external websites using Ionic 2. So we are going to start the tutorial by creating a new Ionic 2 project using the CLI.
ionic start myApp blank --v2 --js cd myApp ionic platform add android
Please note the --v2 switch that tells ionic CLI to scaffold an Ionic 2 project instead of Ionic 1 project.Note also that we are creating a blank app.
Since i'm using an Ubuntu OS I can only build for Android.In case you are using a MAC system you can also build for iOS so add the iOS platform too with
ionic platform add ios
Now it is time to add the Cordova plugin InAppBrowser that enables us to launch external URLs inside our Ionic 2 mobile app.This can be easilly achieved using one line
cordova plugin add cordova-plugin-inappbrowser
InAppBrowser plugin provides a web browser view which behaves like any regular web browser so it can't access the Cordova API.
InAppBrowser allows you to render external urls content 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 only opens external urls
So after making sure the Cordova platform is ready ,you can call
cordova.InAppBrowser.open(url, target, options);
url: is 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.
RELATED TUTORIALSIonic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 3 Grid System Tutorial
Learn Ionic 3: Easy Steps Tutorial
Ionic 3 Routing and Navigation Tutorial & Examples
Ionic 2/3 - Create, Generate and Add Pages
Ionic 3 Http Post by Example
Ionic 4/Angular Tutorial - Ionic 4 Router (Routing and Navigation Example)