How to close InAppBrowser window in Cordova by itself

This article illustrates two methods to self-close an opened InAppBrowser window in Cordova, based on an action performed inside the IAB 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 self-close the InAppBrowser in Cordova

  1. Using a loadstart  event listener (works with stable plugin)
  2. Using a message event listener with the postMessage API (requires plugin 3.1.0-dev)

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.

Notice: The postMessage method requires the newest (and potentially untested) inappbrowser plugin, however, it provides the means for extensive interaction between the IAB (InAppBrowser) window and the Cordova webview.

First: Add the InAppBrowser plugin to your app

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

The postMessage API method requires installing the 3.1.0-dev version (unreleased as stable), in this case install the plugin using this command:

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 the 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 used to reference the InAppBrowser window in your Cordova app:

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:

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 Javascript method:

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 detect this navigation.

Using the message event and postMessage API 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 the 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.

Warning: this requires the cordova-plugin-inappbrowser@3.1.0-dev version to work.

First declare the inAppBrowserRef variable used to reference the InAppBrowser window in your Cordova app:

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:

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:

As you can see, the above 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-dev.

Notice: This postMessage method seems to require at least API 19 (Android 4.4.2) to work. It does not work in very old API levels such as 15 (Android 4.0.3).