There are links into the app that are sometimes need to be open, to open those links a mobile web browser is needed. A browser only can render the html files, so you have to include the In-app browser during the building of the app.

This Apache Cordova plugin is used for opening web browser inside the app build on Cordova.

Step 1 – Install the Plugin

Open the command prompt window and type the following code:

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Step 2 – Adding a button

We will create a button that will be used for opening inAppBrowser window in index.html file.

Step 3 - Adding Event Listener

Now, you have to add an event listener for the button inside onDeviceReady function in index.js file.

document.getElementById("BrowserOpen").addEventListener("click", BrowserOpen);

Step 4 - Creating Function

In this step, you will be creating a function that will open browser inside our app. We are assigning it to the variable ‘ref’ that we can use later to add event listeners.

function BrowserOpen()
 {

   var url = 'https://cordova.apache.org';
   var target = '_blank';

   var options = "location=yes"
   var ref = cordova.InAppBrowser.open(url, target, options);

   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loadloaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {

      console.log('Loading finished: ' + event.url)

   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {

      console.log('Browser is closed...')
   }
}