Consistent way to open links from Phonegap app in both Android and iOS?

Question

I have a mobile app made with Phonegap which displays news articles which may contain links. I want those links to open in a proper browser, seperate from the app. I cannot find a single way to do this which gives the same results in Android and iOS after I upgraded from Phonegap version to 2.0.0 to 2.1.0 (since you cannot rotate the screen in iOS prior to 2.1).

---

<a href="http://blah">
Always opens within the app, no browser toolbars, and no way to get back to the app without terminating it. iOS obeys <access origin="http://blah" /> in config.xml but Android doesn't. Neither seem to care about the browserOnly="true" attribute.

<a href="http://blah" target="_blank">
iPhone opens this within Safari browser if <access> allows it (or is omitted entirely), but Android opens it within the app .

<preference name="stay-in-webview" value="false" />
Adding this to config.xml makes no difference at all.

<a href="#" onClick="navigator.app.loadUrl('http://blah',{openExternal:true});return false;">
Only supported in Android, where it opens the link in Chrome browser. Errors in iOS.

<a href="#" onClick="window.open('http://blah','_blank','location=yes');return false;">
In Phonegap version 2.3.0 this will stay within the app but shows a cheap-looking browser toolbar at top/bottom with a button that allows you to return to the app. This is consistent...but not what I want. (In version 2.1.0 this causes Android to open within the app and iOS to open in proper browser.)

---

I am using Phonegap Build so this solution will not work.
The official documentation refers to this blog post which was written with reference to version 1.5.0 and my 2.1.0 to 2.3.0 findings do not match with their table.
I don't really want to add a plugin for something this simple.

Is there a single piece of code which will cause a link to open in the device's own browser, outside of the app's webview, regardless of OS?

Answer 1

Maybe it's not too late. Anyway, this is from our codebase and it works on both platforms.

openURL: function(url) {
    if(device.platform === 'Android') {
        navigator.app.loadUrl(url, {openExternal:true});
    } else {
        window.open(url, '_system');
    }
},

Answer 2

I just wanted to point out, I have not actually managed to do this myself but are you using the inAppBrowser plugin and do you have that specified in your config.xml with the necessary permissions?

According to this http://docs.phonegap.com/en/3.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser you should use:

var ref = window.open(url, target, options);

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.

Answer 3

you need to install the inAppBrowser plugin and run this function onDeviceReady function with the help of jQuerys .on('click') method like so

function hijack_externalLinks(){

    $(document).on('click', "a[href^='http://']", function (e) {

         window.open( this.href , '_system', 'location=yes' );
         this.href = '/#';

          });
}