In-App Browser
Sooner or later, almost every app needs to send the user somewhere outside its own screens — a
privacy policy, terms of service, a documentation page, or a third-party login flow. Inside a
regular desktop browser tab, a plain window.open() or an <a href="https://...">
link would just work. Inside a Cordova WebView, though, that same code either does nothing, throws
an error, or navigates your entire app away from itself, depending on the platform and WebView
version. The fix is the cordova-plugin-inappbrowser plugin.
Why You Need This Plugin at All
A Cordova app's WebView is configured to treat your own www/ files as "the app," and
by default it restricts or blocks navigation to arbitrary external domains for security reasons.
A plain link click or a window.open('https://example.com') call can silently fail,
open nothing, or — worse — navigate the WebView itself away from your app's UI to that external
page, effectively "breaking out" of your app with no way back except the OS back button. The
InAppBrowser plugin solves this properly: it gives you an explicit, controllable browser view
(or a handoff to the system browser) instead of relying on the WebView's inconsistent default
link-handling behavior.
Installing the Plugin
cordova plugin add cordova-plugin-inappbrowser
Once installed, the plugin overrides window.open() globally with its own
implementation — so even existing code calling window.open() gets the corrected
behavior — but it's clearer and more explicit to call cordova.InAppBrowser.open()
directly.
The open() API
cordova.InAppBrowser.open(url, target, options);| target value | Behavior |
|---|---|
_blank | Opens the URL in the plugin's own in-app browser overlay — a browser-like view with its own toolbar, layered on top of your app. The user stays "inside" your app conceptually and can close it to return. |
_system | Hands the URL off entirely to the device's actual system browser app (Chrome, Safari, etc.), outside your app. Simplest option when you just want a normal external link. |
_self | Loads the URL directly into your app's own Cordova WebView, replacing your current UI. Rarely what you want for external links — this is really only useful for internal navigation. |
Useful options
The third argument is a comma-separated string of key=value pairs controlling how the
in-app browser overlay (_blank) looks and behaves:
| Option | What it controls |
|---|---|
location=yes|no | Whether the address bar / URL bar is shown in the overlay toolbar |
toolbar=yes|no | Whether the top toolbar (with a close/done button) is shown at all |
zoom=yes|no | (Android) whether pinch-zoom controls are enabled |
hidden=yes|no | Loads the page in the background before showing it, useful with the loadstop event |
Full Worked Example: Opening an External Page
Opening this site's own privacy policy in the in-app overlay browser, with the address bar hidden for a cleaner look:
document.getElementById('privacyLink').addEventListener('click', function() {
var browserRef = cordova.InAppBrowser.open(
'https://codingwithsonu.com/privacy-policy.php',
'_blank',
'location=no,toolbar=yes'
);
});Listening for Navigation Events
The object returned by open() fires events you can listen for, letting your app react
to what's happening inside the in-app browser overlay — for example, showing a loading spinner
until the page finishes loading, or running cleanup logic once the user closes it.
var browserRef = cordova.InAppBrowser.open('https://example.com/docs', '_blank', 'location=yes');
browserRef.addEventListener('loadstart', function(event) {
console.log('Started loading: ' + event.url);
});
browserRef.addEventListener('loadstop', function(event) {
console.log('Finished loading: ' + event.url);
});
browserRef.addEventListener('exit', function() {
console.log('User closed the in-app browser');
});When to Just Use _system Instead
If you don't need any control over the browsing experience at all — you just want to hand the
user off to a normal web page and let their own browser (with their bookmarks, extensions, and
saved logins) take over — _system is the simplest, lowest-friction choice:
cordova.InAppBrowser.open('https://example.com/terms', '_system');There's no overlay UI to configure, no events to worry about, and it matches what users expect from a normal "open in browser" link.