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 “OPENEXTERNAL” 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.

// This function opens the external URL within the hybrid app
this.fm.registerHandler("cbxclick", "OPENEXTERNAL", 
                         function (fm, event, fieldName, value) 
						{
							var url = 'https://www.google.co.in/';
							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("loadErrorCallBack");
	}

	function exitCallBack() 
	{
    	showAlert("ExitCallBack");
	}