Cordova, why would InAppBrowser plugin be required to open links in system browser

Question

I have a Cordova app, it is a single page application with a single HTML file.

All links should open in the system browser. I don't want an "embedded" InAppBrowser but really the native system / external browser.

Everywhere we can find example of code using InAppBrowser with something like:

window.open('http://apache.org', '_system');

But why do we need to install InAppBrowser, even if we don't even plan to use an embedded browser?

Can someone really expain what is supposed to be the behavior of a WebView, regarding the target of a link. It is not clear what it is supposed to do with a target=_blank, but I don't see anything else it can do except opening a new browser window.

Notice that the problem seems to only be with iOS because with Android (with Crosswalk plugin) using target=_blank seems to always work fine and open in a new native browser window.

Answer 1

So I'm answering my own question with what I've found out. Note I'm only dealing with iOS and Android (with Crosswalk plugin) on Cordova 5.1.1, and it may not apply to other platforms/versions.

InAppBrowser is required

Even if you don't need an embedded browser, InAppBrowser plugin is required. This makes the _system target available that triggers native plugin code to open the system/external browser.

So it seems the plugin is somehow a "2 in 1" plugin: it permits to use an embedded browser + it permits to securely force the external system browser to open.

It is not clear what the default WebView behavior should be relative to _blank links (nor if it is standardized in any way for WebViews) but I've found no way to open the external browser on iOS without this plugin or native code.

Opening _self in WebView, and _blank in native browser

If like me you don't care about the embedded browser, but just want to open all _blank targets to the native external browser in an existing app, without too much pain (particularly if the app is also a mobile website...), you can run the following code at the beginning of your app:

function openAllLinksWithBlankTargetInSystemBrowser() {
    if ( typeof cordova === "undefined" || !cordova.InAppBrowser ) {
        throw new Error("You are trying to run this code for a non-cordova project, " +
                "or did not install the cordova InAppBrowser plugin");
    }

    // Currently (for retrocompatibility reasons) the plugin automagically wrap window.open
    // We don't want the plugin to always be run: we want to call it explicitly when needed
    // See https://issues.apache.org/jira/browse/CB-9573
    delete window.open; // scary, but it just sets back to the default window.open behavior
    var windowOpen = window.open; // Yes it is not deleted !

    // Note it does not take a target!
    var systemOpen = function(url, options) {
        // Do not use window.open becaus the InAppBrowser open will not proxy window.open
        // in the future versions of the plugin (see doc) so it is safer to call InAppBrowser.open directly
        cordova.InAppBrowser.open(url,"_system",options);
    };


    // Handle direct calls like window.open("url","_blank")
    window.open = function(url,target,options) {
        if ( target == "_blank" ) systemOpen(url,options);
        else windowOpen(url,target,options);
    };

    // Handle html links like <a href="url" target="_blank">
    // See https://issues.apache.org/jira/browse/CB-6747
    $(document).on('click', 'a[target=_blank]', function(event) {
        event.preventDefault();
        systemOpen($(this).attr('href'));
    });
}