Ionic - Cordova InAppBrowser

The Cordova InAppBrowser plugin is used to open external links from your app inside a web browser view.

Using Browser

It is very easy to start working with this plugin. All you need to do is to open the command prompt window and install the Cordova plugin.

C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser

This step allows us to start using the inAppBrowser. We can now create a button that will lead us to some external link, and add a simple function for triggering the plugin.

HTML Code

<button class = "button" ng-click = "openBrowser()">OPEN BROWSER</button>

Controller Code

.controller('MyCtrl', function($scope, $cordovaInAppBrowser) {

   var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no'
   };

   $scope.openBrowser = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
  
      .then(function(event) {
         // success
      })
  
      .catch(function(event) {
         // error
      });
   }
})

When the user taps the button the InAppBrowser will open the URL we provided.

Several other methods can be used with this plugin, some of which are in the following table.

Cordova $inAppBrowser Methods

Method	Parameters	Type	Details
setDefaultOptions(parameter1)	options	object	Used to set global options for all InAppBrowsers.
open(parameter1, parameter2, parameter3)	URL, target, options	string, string, object	There are three targets available. _blank will open new inAppBrowser instance. _systemwill open system browser and _selfwill use current browser instance.
close	/	/	Used to close InAppBrowser.

Cordova InAppBrowser Events

This plugin also offers events that can be combined with $rootScope.

Example	Details
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event));	Called when inAppBrowser start loading the page.
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event));	Called when inAppBrowser has finished loading the page.
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event));	Called when inAppBrowser has encountered error.
$rootScope.$on('$cordovaInAppBrowser:exit', function(e, event));	Called when inAppBrowser window is closed.