Phonegap 2.9.0 doesn't open external links in default browser

Question

What I'm trying to do is super simple, open a link on the device browser, but it's showing to be harder than I had thought.

I create the project and add ios and android platforms with:

$ phonegap create project_name
$ phonegap build ios
$ phonegap build android

I have ; inside config.xml (tried different ways, none works) and "stay-in-webview" set to false.

The only changes I made in the www/index.html file was to add the links, the page is including all default scripts(phonegap.js, js/index.js and a call to app.initialize()).

I tried all these links, all opened inside the webview:

<a href="#" onclick="window.open('http://www.google.com', '_blank', 'location=yes');">_blank</a>
<a href="#" onclick="window.open('http://www.google.com', '_system', 'location=yes');">_system</a>
<a href="#" onclick="window.open('http://www.google.com', '_system');">_system</a>
<a href="http://www.google.com" target="_blank">target _blank</a>
<a href="http://www.google.com">no target</a>

Making clear that all the tests I made where done in the ios simulator and android emulator.

I've searched quite a lot, tried everything I found, but nothing works. Thanks for any help

Answer 1

To have links in a Cordova/PhoneGap App open in the default browser of the device, you have to make sure that window.open(<url>, '_system'); will be used to access it. For this to actually work -maybe a bit counter-intuitively- you need to enable the ‘InAppBrowser’ plug-in.

In Cordova version 2.9.0 the ‘InAppBrowser’ plug-in is built-in and you only have to make sure it is not commented out in Cordova’s config.xml. From version 3.0.0 on you will have to install the plug-in by running this command from your project directory:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

From the Cordova documentation on how ‘InAppBrowser’ uses the second argument target of window.open() in its overriden implementation:

target: The target in which to load the URL, an optional parameter that defaults to _self. (String)

• _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
• _blank: Opens in the InAppBrowser.
• _system: Opens in the system's web browser.

In order to separate concerns and to prevent me from forgetting to add an onclick attribute to every <a/> that I want to open in the default browser, I like to dynamically attach that behaviour via JavaScript. Below is an example using jQuery in which the behaviour will also be re-attached after reloading the involved HTML via XHR. And it will only be attached to external links, thus also preventing attaching it to mailto: links.

$('#idContentwrapper').on('click', '.colofon-text a', function(event) {
    var href = $(this).attr('href');
    if (typeof href !== 'undefined' &&
        href.substr(0, 7) === 'http://')
    {
        event.preventDefault();
        // Open in default browser App (on desktop: open in new window/tab)
        window.open(this.href, '_system', 'location=no');
    }
});