Cordova InAppBrowser

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 = '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...')
   }
}

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

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.

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

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

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 -

ref.close();

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

ref.show();

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);