Cordova Plugin InAppBrowser

We can define the InAppBrowser as a native Cordova plugin that mainly used to add an in-app browser for any of the hybrid mobile applications. By using the InAppBrowser, we can open an external link from the Cordova application. It can easily load a webpage inside the Cordova app. In a simple language, we can say that this plugin loads a child browser in your Cordova app and loads a web page or third party (untrusted) content. But note that we cannot access Cordova APIs like Camera, Battery Status, etc from this plugin. For providing an ease to the user, this plugin offers some default UI controls like back, forward, done.

It is a web browser view in a Cordova application that can be displayed by calling the cordova.InAppBrowser.open() method.

var ref = cordova.InAppBrowser.open('https://javatpoint.com', '_blank', 'location=yes');

What makes an InAppBrowser useful?

We can perform various tasks by using the InAppBrowser plugin which are as follows:

Load Payment gateway pages
Load web pages/ 3^rd party websites.
Load like Iframe.

window.open()

We can define the cordova.InAppBrowser.open() method as a drop-in replacement for the window.open() method. This InAppBrowser window can be used by the existing window.open() calls with the replacement of the window.open() method.

window.open = cordova.InAppBrowser.open;

The InAppBrowser method loads a child browser in your Cordova app, but this method can't access the Cordova APIs like Camera, Battery Status, etc. Due to this, this method is recommended for the user to load a third party (untrusted) content.

For providing an ease to the user, this plugin offers some default UI controls like back, forward, done.

This plugin hooks window.open() method for the backward compatibility. However, some of the unexpected errors may face during the plugin-installed hook of the method. In the future release, the hook of the window.open will be removed until the hook is removed from the plugin.

delete window.open The above command is used to revert the call back to its default prototype. If window.open is in the global scope, nevertheless, this plugin was not available until after the deviceready event.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("window.open works properly");
}

Installation

The below command installs the InAppBrowser plugin in your project.

cordova plugin add cordova-plugin-inappbrowser

cordova.InAppBrowser.open

The main task of the InAppBrowser.open method is to open a URL in a new InAppBrowser instance, system browser, and current browser.

It is supported in various platforms like Android, iOS, Windows, OSX, Browser.

Now discuss the above-mentioned terms:

ref: This ref variable is used to provide a reference to the InAppBrowser window when the target is set to '_blank'.

url: As the name suggests, this parameter consists of a string value and defines the URL of a webpage.

target: It is an optional parameter that consists of a string value. This method defines the target where the URL of a webpage will load. The default value of the target parameter is set to _self.

_self: This value opens a web page in the Cordova WebView, if the URL of a web page is present in the white list. Otherwise, it will open the webpage in the InAppBrowser.
_blank: This value opens a web page in the InAppBrowser.
_system: This value opens a web page in the system's web browser.

options: It is also an optional parameter that consists of various options for the InAppBrowser method. It consists of a string value where the default value is set to location=yes.

Before passing this parameter into the function, first you should check that it does not contain any blank space. Also you should check that each feature's name/value pairs are separated by a comma. The feature names are case insensitive.

The options supported by all the platforms are listed below:

location: This option turns InAppBrowser's location bar to on or off by setting yes or no value.

Whereas, in the Android platform, various additional options are supported which are as follows:

hidden: This option is required to create the browser and load the web page by setting its value to yes. But this option does not show it. When the loading is completed, then the loadstop event is fired to stop the loading of the specific webpage. Its default value was set to no to open and load the web browser normally.

beforeload: It is an event that is used to modify the pages that are loaded in the browser. This option can accept three values i.e., get, post, and yes. By setting get value of this event, it intercepts only GET requests. The post value stops on POST requests whereas the yes value stops both GET and POST requests.

It should be noted that the POST requests are not currently supported. An error will rise if we set the beforeload=post.

clearcache: We can clear the browser's cookie cache before the new window is opened. To enable this option, we have to set this value to yes.

clearsessioncache: By using this option, we can clear the session cookie cache before the new window was opened. To enable this option, we have to set this value to yes.

closebuttoncaption: In this option, instead of X, a string value must be set to use as the close button's caption. It should be noted that you must have to localize this value by yourself.

closebuttoncolor: By using this option, we can set the color to a valid hex color string. This option can change the default close button color. We can use this option by setting the location to yes.

footer: In this option, to display a close button in the footer similar to the Done button of the iOS platform, we have to set the value to yes. Use closebuttoncaption and closebuttoncolor to set the property because the close button will be the same as the header.

footercolor: This option can change the default footer color or set the valid hex color string. This option is enabled if we set the footer to yes.

hardwareback: This option is responsible to use the hardware back button by setting the value to yes. The hardware back button is used to navigate backward through the history of InAppBrowser. The InAppBrowser will be closed if there is not any previous page. The default value of hardwareback is yes. If you want the back button to close InAppBrowser, you must set the value to no.

hidenavigationbuttons: We can hide navigation buttons on the location toolbar by setting the value to yes. Default value of this option is no.

hideurlbar: This option is used to hide the URL bar on the location toolbar by setting the value to yes. Default value of this option is no.

navigationbuttoncolor: This option can change the default color of both navigation buttons or set to a valid hex color string. For doing this, we need to set the location to yes, and do not set the hidenavigationbuttons to yes.

toolbarcolor: This option can change the default toolbar color or set to the valid hex color string. For doing this, we need to set the location to yes.

lefttoright: In this option, the positions of navigation buttons and close button will be swapped by setting the value to yes. In particular, the navigation buttons go to the left and the close button goes to the right.

zoom: To show the zoom controls of the Android browser's button, we have to set its value to yes. If you want to hide it, you have to set the value to no. Its default value is yes.

mediaPlaybackRequiresUserAction: To prevent the HTML5 audio or video from auto-playing, we have to use this option by setting the value to yes. The default value of the option is no.

shouldPauseOnSuspend: To stop the background audio, this option makes InAppBrowser WebView to pause or resume with the app. It can be done by setting the option to yes.

Now, it is the time to discuss the additional options supported by the Windows platform:

hidden: If you want to create the browser and load the page, you can use this option by setting its value to yes. But this option does not show it. When the loading was completed, a loadstop event was fired to stop the loading. The default value of this option was set to no to open and load the browser normally.

hardwareback: It works the same as the Android platform.

This option is responsible to use the hardware back button by setting the value to yes. The hardware back button is used to navigate backwards through the history of InAppBrowser. The InAppBrowser will be closed if there is not any previous page. The default value of hardwareback is yes. If you want the back button to close InAppBrowser, you must set the value to no.

fullscreen: To create the browser control without a border, we can use the fullscreen option by setting the value to yes. It should be noted that if we specify the value of location to no, there will be no control presented to the user for closing the IAB window.

Methods:

There are different methods available to be used in the InAppBrowser which are as follows:

addEventListener
removeEventListener
show
hide
close
executeScript
insertCSS

InAppBrowser.addEventListener

The main task of the InAppBrowser.addEventListener method is to add a listener for an event. But this method is used only when the target is set to '_blank'. This method was supported in various platforms such as Android, Windows, iOS, OSX, Browser.

Syntax:

ref.addEventListener(eventname, callback);

The ref is used to provide the reference to InAppBrowser window.

Parameters:

eventname: This parameter consists of a string value to show the event name. There are some of the events discussed below:

loadstart: This event was fired when starting the InAppBrowser to load the URL.
loadstop: The event was fired when the InAppBrowser finishes loading a URL.
loaderror: When an error was encountered while loading a URL, this event was fired.
exit: When an InAppBrowser window was closed, this event was fired.
beforeload: The event was fired when InAppBrowser decides whether to load an URL or not.
message: When the InAppBrowser receives a message, this event was fired. This message is posted from the particular page loaded inside the InAppBrowser WebView.

callback: When an event was fired, this function is executed. It was passed to an InAppBrowserEvent object as a parameter.

Example:

var inAppBrowserRef;
function showHelp(url) {
    var target = "_blank";
    var options = "location=yes,hidden=yes,beforeload=yes";
    inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
    inAppBrowserRef.addEventListener('loadstart', loadStartCallBack);
    inAppBrowserRef.addEventListener('loadstop', loadStopCallBack);
    inAppBrowserRef.addEventListener('loaderror', loadErrorCallBack);
    inAppBrowserRef.addEventListener('beforeload', beforeloadCallBack);
    inAppBrowserRef.addEventListener('message', messageCallBack);
}
function loadStartCallBack() {
    $('#status-message').text("Loading...");
}
function loadStopCallBack() {
    if (inAppBrowserRef != undefined) {
        inAppBrowserRef.insertCSS({ code: "body{font-size: 25px;" });
        inAppBrowserRef.executeScript({ code: "\
            var message = 'message';\
            var messageObj = {msg: message};\
            var stringifiedMessageObj = JSON.stringify(messageObj);\
webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);"
        });
        $('#status-message').text("");
        inAppBrowserRef.show();
    }
}
function loadErrorCallBack(params) {
    $('#status-message').text("");
    var scriptErrorMesssage =
       "alert('Cannot open page. Server message is : "
       + params.message + "');"
    inAppBrowserRef.executeScript({ code: scriptErrorMesssage }, executeScriptCallBack);
    inAppBrowserRef.close();
    inAppBrowserRef = undefined;
}
function executeScriptCallBack(params) {
    if (params[0] == null) {
        $('#status-message').text(
           "Cannot open page. Server message is : '"
           + params.message + "'");
    }
}
function beforeloadCallBack(params, callback) {
    if (params.url.startsWith("http://www.javatpoint.com/")) {
        // Loading URL in InAppBrowser.
        callback(params.url);
    } else {
        // Callback not invoked, so page will not be loaded.
        $('#status-message').text("This browser only opens pages on http://www.javatpoint.com/");
    }
}
function messageCallBack(params){
    $('#status-message').text("message received: "+params.data.my_message);
}

InAppBrowser.removeEventListener

If we talk about this method, it removes an event listener from the InAppBrowser. We can avail this method only when the target is set to '_blank'. This method is supported in various platforms such as Android, Windows, iOS, Browser.

Syntax:

ref: The ref is used to provide the reference to InAppBrowser window.

Parameters:

eventname: This parameter consists string value to show the event name.

Some of the events are discussed below:

loadstart: This event was fired when starting the InAppBrowser to load a URL.
loadstop: This event was fired when the InAppBrowser finishes loading a URL.
loaderror: When an error was encountered while loading a URL, this event was fired.
exit: When an InAppBrowser window was closed, this event was fired.
message: When the InAppBrowser receives a message, this event was fired. This message is posted from the page loaded inside the InAppBrowser WebView.

callback: This function was executed when an event was fired. It was passed to an InAppBrowserEvent object.

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank', 'location=yes');
var myCallback = function(event) 
{ 
alert(event.url); 
}
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);

InAppBrowser.close

By using this method, we can close the window of InAppBrowser. This method is used to close the window of InAppBrowser. It is supported in various platforms such as Android, Windows, iOS, Browser.

Syntax:

ref: The ref is used to provide the reference to InAppBrowser window.

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank', 'location=yes');
ref.close();

InAppBrowser.show

By using this method, we can display the hidden InAppBrowser window. But this method does not show any effect if the InAppBrowser was already visible. It is supported in various platforms such as Android, Windows, iOS, Browser.

Syntax:

ref: The ref is used to provide the reference to InAppBrowser window.

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank', 'hidden=yes');
ref.show();

InAppBrowser.hide

If you want to hide the window of InAppBrowser, you can simply do it by using the InAppBrowser.hide method. It is supported in various platforms such as Windows, Android, iOS.

Syntax:

ref: The ref is used to provide the reference to the InAppBrowser window.

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank');
ref.hide();

InAppBrowser.executeScript

If you need to inject JavaScript code into the InAppBrowser window, you can simply do it by using the InAppBrowser.executeScript method. But it should be noted that this method is only available when the target is set to '_blank'. It is supported in various platforms such as Windows, Android, iOS, Browser.

Syntax:

ref: The ref is used to provide the reference to InAppBrowser window.
injectDetails: It mainly refers to an object which provides the details of the script to run it and specify either the file or code
- file: It is used to inject the URL of the script.
- code: It is used to inject the text of the script.
callback: After the JavaScript code was injected, this method is executed. It is executed with a single parameter if the injected script is of code

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeScript({file: "Script.js"});
});

InAppBrowser.insertCSS

By using the InAppBrowser.insertCSS method, we can simply inject CSS into the InAppBrowser window. But it should be noted that this method is available only when the target is set to '_blank'. It is supported in various platforms such as Windows, iOS, Android.

Syntax:

ref: The ref is used to provide the reference to the InAppBrowser window.
injectDetails: It mainly refers to an object which provides the details of the script to run it and specify either the file or code
- file: It is used to inject the URL of the script.
- code: It is used to inject the text of the script.
callback: It is executed after injected the CSS.

Example:

var ref = cordova.InAppBrowser.open('http://javatpoint.com', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "Styles.css"});
});

Next TopicApache

← prev next →