Cordova - InAppBrowser

This plugin is used for opening web browser inside Cordova app.

Step 1 - Instalpng Plugin

We need to install this plugin in command prompt window before we are able to use it.

C:UsersusernameDesktopCordovaProject>cordova plugin add cordova-plugin-inappbrowser

Step 2 - Add button

We will add one button that will be used for opening inAppBrowser window in index.html.

Step 3 - Add Event Listener

Now let s add event pstener for our button in onDeviceReady function in index.js.

document.getElementById("openBrowser").addEventListener("cpck", openBrowser);

Step 4 - Create Function

In this step we are creating function that will open browser inside our app. We are assigning it to the ref variable that we can use later to add event psteners.

function openBrowser() {
   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( loaderror , 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... )
   }
}

If we press BROWSER button, we will see the following output on screen.

Console will also psten to events. loadstart event will fire when URL is started loading and loadstop will fire when URL is loaded. We can see it in console.

Once we close the browser, exit event will fire.

There are other possible options for InAppBrowser window. We will explain it in the table below.

We can use ref (reference) variable for some other functionapties. We will show you just quick examples of it. For removing event psteners we can use −

ref.removeEventListener(eventname, callback); 

For closing InAppBrowser we can use −

ref.close();

If we opened hidden window, we can show it −

ref.show();

Even JavaScript code can be injected to the InAppBrowser −

var details = "javascript/file/url"
ref.executeScript(details, callback);

The same concept can be used for injecting CSS −

var details = "css/file/url"
ref.inserCSS(details, callback);