Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cordova InAppBrowser

May 21, 2021 Cordova

Table of contents

This plug-in is used to open a web browser in a Cordova application.

Step 1 - Install the plug-in

We need to install this plug-in in the command prompt window before we can use it.

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

Step 2 - Add a button

We'll add a button to open the inAppBrowser .html in index and index.

Step 3 - Add an event listener

Now let's .js event listener for our buttons in the onDeviceReady function in indexing.

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

Step 4 - Create a function

In this step, we create a feature that will open the browser in our app. /b10> We assign it to the ref variable, which we can use later to add an event listener.

function openBrowser() {
   var url = '';
   var target = '_blank';
   var options = "location=yes"
   var ref =, 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...')

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

Cordova InAppBrowser

The console will also listen for events. /b10> When the URL starts loading, the loadstart event fires and loads the loadstop when the URL is loaded. /b11> We can see it in the console.

Cordova InAppBrowser

When you close the browser, the exit event is triggered.

Cordova InAppBrowser

The InAppBrowser window has other possible options. /b10> We'll explain it in the table below.

Options Describe
location Used to open or close the browser location bar. /b10> The value is Yes or No.
hidden Used to hide or display inAppBrowser. /b10> The value is Yes or No.
clearCache Used to clear the browser cache cache. /b10> The value is Yes or No.
clearsessioncache Used to clear the session cookie cache. /b10> The value is Yes or No.
zoom Zoom controls for hiding or displaying Android browsers. /b10> The value is Yes or No.
hardwareback Yes, use the hardware back button to browse your browser history. /b10> No You can click the back button after closing the browser.

For some other features, we can use the ref variable. /b10> We'll show you a quick example of it. For the delete event listener, we can use -

ref.removeEventListener(eventname, callback);

For turning off InAppBrowser, we can use -


If we open the hidden window, we can show it -;

Even JavaScript code can be injected into InAppBrowser -

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

The same concept can be used to inject CSS -

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