Cordova - InAppBrowser

Cordova - InAppBrowser

The cordova-plugin-inappbrowser plugin provides a web browser view that can be opened within your Cordova application. This is useful for displaying external web content, authentication flows, or help pages without forcing the user to leave your app and open a separate browser.

Step 1 - Installing the Plugin

Ensure the plugin is added to your project. Open your terminal or command prompt and run:

cordova plugin add cordova-plugin-inappbrowser

Step 2 - Adding a Button (Example UI)

In your index.html, you can add a button to trigger opening the InAppBrowser.

<!-- In index.html -->
<button id="openBrowserButton">Open External Link</button>

Step 3 - Adding an Event Listener

In your JavaScript file (e.g., index.js), add an event listener for the button, ensuring it’s set up after the deviceready event.

// In index.js, after 'deviceready'
document.addEventListener('deviceready', () => {
    document.getElementById("openBrowserButton").addEventListener("click", openExternalLink);
}, false);

Step 4 - Implementing the openExternalLink Function

This function will use cordova.InAppBrowser.open() to launch the browser view. The open method returns a reference to the InAppBrowser window, which can be used to control it and listen for events.

function openExternalLink() {
    const url = 'https://cordova.apache.org';
    const target = '_blank'; // '_blank' opens in InAppBrowser, '_system' opens in system browser
    const options = 'location=yes,clearcache=yes,toolbar=yes'; // Comma-separated string of options

    // Open the InAppBrowser
    const ref = cordova.InAppBrowser.open(url, target, options);

    // Add event listeners to the InAppBrowser instance
    ref.addEventListener('loadstart', loadstartCallback);
    ref.addEventListener('loadstop', loadstopCallback);
    ref.addEventListener('loaderror', loaderrorCallback);
    ref.addEventListener('exit', exitCallback);

    function loadstartCallback(event) {
        console.log('InAppBrowser: Loading started: ' + event.url);
        // You could show a loading indicator in your app here
    }

    function loadstopCallback(event) {
        console.log('InAppBrowser: Loading finished: ' + event.url);
        // Page has finished loading, hide loading indicator
        // Example: Injecting JavaScript after page loads
        // ref.executeScript({ code: "alert('Page loaded: ' + document.title);" });
    }

    function loaderrorCallback(error) {
        console.error('InAppBrowser: Loading error: ' + error.message);
        // Handle a loading error, e.g., show an error message to the user
        alert('Error loading page: ' + error.message);
    }

    function exitCallback() {
        console.log('InAppBrowser: Browser is closed.');
        // Clean up or perform actions after the browser is closed
        // Don't forget to remove event listeners if 'ref' is stored long-term
        // ref.removeEventListener('loadstart', loadstartCallback);
        // ref.removeEventListener('loadstop', loadstopCallback);
        // ref.removeEventListener('loaderror', loaderrorCallback);
        // ref.removeEventListener('exit', exitCallback);
    }
}

When you tap the ‘Open External Link’ button, the InAppBrowser will open and load https://cordova.apache.org. The console will log messages for loadstart and loadstop events. If an error occurs or when you close the InAppBrowser, the respective loaderror or exit events will fire.

For example, the console output might show:

InAppBrowser: Loading started: https://cordova.apache.org/
InAppBrowser: Loading finished: https://cordova.apache.org/

And when closed:

InAppBrowser: Browser is closed.

InAppBrowser Options

The options parameter in cordova.InAppBrowser.open(url, target, options) is a comma-separated string. Common options include:

Option	Description	Values (Default)
location	Show the location bar (URL address bar).	yes | no (yes)
hidden	Open the browser in a hidden state. Call show() later to display it.	yes | no (no)
clearcache	Clear the browser’s cookie cache before opening.	yes | no (no)
clearsessioncache	Clear the session cookie cache before opening.	yes | no (no)
zoom	(Android only) Show the browser’s zoom controls.	yes | no (yes)
hardwareback	(Android & Windows) Use the hardware back button to navigate InAppBrowser history. If ‘no’, back button closes the browser.	yes | no (yes)
mediaPlaybackRequiresUserAction	Allow HTML5 audio or video to autoplay or play via JavaScript.	yes | no (no, changing to yes typically for iOS 10+)
shouldPauseOnSuspend	(Android only) Pause InAppBrowser WebView when app is sent to background.	yes | no (no)
closebuttoncaption	(iOS only) Set caption for the ‘Done’ button.	String (Done)
disallowoverscroll	(iOS only) Disable overscroll bouncing effect.	yes | no (no)
toolbar	(iOS & Android) Show the toolbar with back/forward/done buttons.	yes | no (yes)
toolbarcolor	(iOS & Android) Set the background color of the toolbar (hex string, e.g., #RRGGBB).	Hex String
hidenavigationbuttons	(iOS & Android) Hide the navigation (back/forward) buttons on the toolbar (if toolbar is visible).	yes | no (no)
closebuttoncolor	(iOS & Android) Set the color of the close button (hex string).	Hex String
lefttoright	(Windows only) Set InAppBrowser to display from left to right or right to left.	yes | no (no)
hidespinner	(iOS only) Hide the loading spinner when loadstart and loadstop events occur.	yes | no (no)

Controlling the InAppBrowser Programmatically

The ref variable obtained from cordova.InAppBrowser.open() allows further interaction:

Example of injecting JavaScript:

ref.addEventListener('loadstop', function(event) {
    if (event.url.includes('cordova.apache.org')) {
        ref.executeScript(
            { code: "document.body.style.backgroundColor = 'lightblue';" },
            function(values) {
                console.log('Script executed, returned: ' + values);
            }
        );
    }
});

Always remember to remove event listeners if the ref object is stored beyond the scope where it’s actively used to prevent memory leaks, especially if you open multiple InAppBrowser instances over time.