External Browser

The External Browser feature provides a web browser view within your mobile application. You can use this feature in your mobile application to open images, access web pages, and open PDF files without using the device browser.

Supported Platforms

This feature is supported in the following platforms:

iOS
Android

Installation

Execute the following command in your Cordova project directory to install the plugin:

cordova plugin add cordova-plugin-inappbrowser

Usage

Let us assume that there is an “OPEN EXTERNAL BROWSER” button in your mobile app. When that button is clicked, Google.com page must be displayed within your mobile app. The following sample code snippet shows the usage that can be written in a listener JS file.

/* The following function opens the external URL within the hybrid app.
*  Here, CFEC.CLICK is the Canvas event that can be used to capture the button clicked action.
*  OPENEXTERNAL is the form item ID for the "OPEN EXTERNAL BROWSER" button.
*/
this.fm.registerHandler(CFEC.CLICK, "OPENEXTERNAL", 
                        function (fm, event, fieldName, value) 
						{
							var url = 'https://www.google.com/';
							var params = 
							{
								options: "location=yes,hidden=yes", 
								url: url
            				};
							var ref = canvas.env.util.browser.openExternal(params);
							canvas.ref = ref;
							onLoadStart(ref);
							onLoadStop(ref);
							onLoadError(ref);
							exit();
						});

function onLoadStart(ref)
{
	canvas.env.util.browser.onLoadStart(ref, loadStartCallBack);
}

function onLoadStop(ref)
{
	canvas.env.util.browser.onLoadStop(ref, loadStopCallBack);
}

function onLoadError(ref)
{
   	canvas.env.util.browser.onLoadError(ref, loadErrorCallBack);
}

function exit(ref)
{
   	canvas.env.util.browser.exit(ref, exitCallBack);
}

function loadStartCallBack() 
{
   	$('#status-message').text("loading please wait ...");
}

function loadStopCallBack() 
{
   	if (canvas.ref !== undefined) 
	{
       	canvas.ref.show();
   	}
}

function loadErrorCallBack() 
{
   	showAlert("Error in loading page.");
}

function exitCallBack() 
{
   	showAlert("Closing external browser.");
}