Methods to auto-close an opened InAppBrowser window in Cordova, based on an action performed inside the browser window itself. These methods involve using an event listener for either the loadstart or message events. You can also use this message event to communicate directly from the IAB to the Cordova WebView, to perform other actions.

Methods to close an InAppBrowser in Cordova

1. Using a loadstart event listener
2. Using a message event listener with the postMessage API

The postMessage API method allows sending arbitrary data from the IAB to the WebView, and this can be used to perform other WebView actions as well. In this example we will simply close the InAppBrowser window by sending a close message.

Add the InAppBrowser plugin

If you haven’t done it already, add the InAppBrowser plugin with this command:

cordova plugin add cordova-plugin-inappbrowser

Using the loadstart event to close the InAppBrowser

This method takes advantage of the loadstart event listener and it works as follows:

1. Open an InAppBrowser window referenced to an inAppBrowserRef variable.
2. Add a loadstart event listener to listen to URL loading events.
3. Create a loadStartCallBack callback to check the loaded URLs.
4. If the loaded URL matches the predefined close URL, close the IAB window.

First declare the inAppBrowserRef variable (or whatever name) used to reference the InAppBrowser window.

Then add the functions to open the InAppBrowser window (after the onDeviceReady event was fired) and create a callback function to listen to the loadstart event from the IAB:

var inAppBrowserRef;

function openInAppBrowser() {
  /* Open URL */
  var open_url = 'http://www.sampleurl.com/sample.htm';
  inAppBrowserRef = cordova.InAppBrowser.open(open_url, '_blank', 'clearcache=yes,clearsessioncache=yes,location=yes,hardwareback=no,zoom=no');
  /* Add event listener to close InAppBrowser*/
  inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
}

function loadStartCallBack(event) {
  /* Close InAppBrowser if loading the predefined close URL */
  if (event.url == 'http://www.sampleurl.com/sample.htm#close') {
    inAppBrowserRef.close();
  }
}

Whenever a new URL is loaded by the InAppBrowser window using the window.location  method or by natural links browsing, the loadStartCallBack function will be triggered.

In order to close the IAB window, simply have it navigated to the closing URL and the loadStartCallBack function will close it if the loaded URL matches the closing URL. You can change its URL either by normal links inside the page itself, or with this method:

window.location = 'http://www.sampleurl.com/sample.htm#close'

As you can see we are using the same URL that was loaded originally, but adding the #close anchor. Do not try to load invalid (e.g. non-http(s) URLs) or the IAB will trigger an error and the loadstart event won’t work.

Using the message event to close the InAppBrowser

This method waits for a message sent by a tweaked version of the standard postMessage API and received by the message event listener from the IAB window and it works as follows:

1. Open an InAppBrowser window referenced to an inAppBrowserRef variable.
2. Add a message event listener to listen to messages from the postMessage API.
3. Create a messageCallBack callback to process the messages received.
4. If the received message contains an action JSON object with the value close, close the IAB window.

First declare an inAppBrowserRef variable (or whatever name) used to reference the InAppBrowser window.

Then add the functions to open the InAppBrowser window (after the onDeviceReady event was fired) and create a callback function to listen to the message event from the IAB:

var inAppBrowserRef;
function openInAppBrowser() {
  /* Open URL */
  var open_url = 'http://www.sampleurl.com/sample.htm';
  inAppBrowserRef = cordova.InAppBrowser.open(open_url, '_blank', 'clearcache=yes,clearsessioncache=yes,location=yes,hardwareback=no,zoom=no');
  /* Add event listener to close the InAppBrowser */
  inAppBrowserRef.addEventListener('message', messageCallBack);
}

function messageCallBack(params) {
  /* Close the InAppBrowser if we received the proper message */
  if (params.data.action == 'close') {
    inAppBrowserRef.close();
  }
}

In the open_url variable set your destination URL to open.

In this target page URL paste and invoke the following function to send an {action = close} JSON object to the InAppBrowser:

function postCordovaMessage() {
	/* Send an action = 'close' JSON object to Cordova via postMessage API */
	var message = {action: 'close'};
	if (!webkit.messageHandlers.cordova_iab) {
		console.warn('Cordova IAB postMessage API not found!');
		throw 'Cordova IAB postMessage API not found!';
	} else {
		console.log('Message sent!');
		webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
	}
}

As you can see, this postCordovaMessage function method is not exactly compliant with the standard postMessage API. The sample is only valid for your InAppBrowser windows created with Cordova and using cordova-plugin-inappbrowser 3.1.0 or newer.