How to open external links in the Cordova/PhoneGap inAppBrowser or system default browser using jQuery - tutorial for hybrid mobile apps on Android and iOS

While working at a hybrid mobile project with IBM MobileFirst (Worklight 6.3) and jQuery Mobile, I recently had the need to open an external link within a browser (embedded or external, it didn't really matter) in both Android and iOS.
Unfortunately, this task was not that simple. Writing a normal link, such as
<a href="www.mylocation.com" target="_blank">go to my location</a>
didn't work at all in Android. I clicked on the link, but nothing happened, even if it clearly specified target="_blank" (that is "open this link in a separate window"). No good! >:/
In iOS instead I had a more annoying behaviour: the link opened in a new, fullscreen window, and once the window opened there was no way to go back to my app.

After a few hours spent on google and stackoverflow, I finally came across a way to make the link open in the default browser for Android and in the Cordova InAppBrowser for iOS.

This is what you need to know if you're using Cordova 3.6.*, Worklight MobileFirst 6.3 and jQuery Mobile to make your mobile apps.


First of all, in the HTML format your link like this:
<a id="myLink" data-href="http://www.mylocation.com" href="#">your text</a>
Basically, put your target location (http://www.mylocation.com) in a custom attribute (data-href), so you don't lose it. Don't place it inside the href attribute, since this would trigger the default behaviour which is very annoying in iOS and flawed in Android!

Now use jQuery to open the link programmatically with Javascript. Here's the code you need in your javascript file:

$("a#myLink").on("click", function(){
    //Define the behaviour of your code when someone clicks on a link called "myLink"
    openLink($(this).attr("data-href"));
});

As you can see, openLink() is a function I have not yet implemented. To make your app work fine on both Android and iOS platforms, you have to define this function differently.

Function definition for Android apps:
function openLink(myExternalLink){
    window.open(myExternalLink, "_system", "location=no");
}
By writing "_system", you basically tell your app to open the link in the system's default browser.

Here's the function definition for iOS apps specifically:
function openLink(myExternalLink){
    window.open(encodeURI(myExternalLink), '_blank', 'location=no, toolbar=yes');
}