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, 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.


Cordova plugin inappbrowser

comments powered by Disqus