Cordova - InAppBrowser

Advertisements

Previous Page
Next Page  

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

Step 1 - Installing Plugin

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

C:\Users\username\Desktop\CordovaProject>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 listener for our button in onDeviceReady function in index.js.

document.getElementById("openBrowser").addEventListener("click", 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 listeners.

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.

Cordova InAppBrowser Open

Console will also listen 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.

Cordova InAppBrowser Console

Once we close the browser, exit event will fire.

Cordova InAppBrowser Exit Console

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

S.No option & details
1

location

Used to turn the browser location bar on or off. Values are yes or no.
2

hidden

Used to hide or show inAppBrowser. Values are yes or no.
3

clearCache

Used to clear browser cookie cache. Values are yes or no.
4

clearsessioncache

Used to clear session cookie cache. Values are yes or no.
5

zoom

Used to hide or show Android browser's zoom controls. Values are yes or no.
6

hardwareback

yes to use the hardware back button to navigate back through the browser history. no to close the browser once back button is clicked.

We can use ref (reference) variable for some other functionalities. We will show you just quick examples of it. For removing event listeners 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);
Advertisements