Generated links don't open in browser - Phonegap build

Question

I am trying to force the links in my app to open in external browser. I am working with jQuery mobile & Phonegap build.

My app has a page with generated contact details. Among the details there is an link to the person's website:

row+='<div class="accWWW"> <a href="http://'+ data[i].website +'" onclick="openGenerated(this); return false;">'+ data[i].website +'</a></div>';

I have these 2 functions defined in my code.

//function which forces open in browser
function openBrowser(url){
    if(device.platform === 'Android') {
        navigator.app.loadUrl(url, {openExternal:true});
    } else {
        window.open(url, '_system');
    }
}

//opens generated URL's
function openGenerated(obj){
    var url = obj.getAttribute("href");
    console.log(url);
    openBrowser(url);
        return false;
}

I also have a simple <div class="accWWW"> <a href="#" onclick="openBrowser('http://www.google.com');"> Google </a></div> set in my index.html

So... this link to Google opens perfectly in iOS (haven't yet tested on Android because iOS was my biggest problem), but the generated link wouldn't do anything if I hadn't added the openGenerated function. Now there is an action, but it opens inside the app.

Do you have any idea why that is?

Also when checking on the laptop I get these errors in the console( link is my development url):

Uncaught ReferenceError: device is not defined *link*:277 // makes sense probably, because I am not using a mobile device
Uncaught SecurityError: Blocked a frame with origin "http://www.test.com" from accessing a frame with origin "*link*". Protocols, domains, and ports must match.// what is this?

I was thinking maybe it's an access issue, but I added <access origin="*" browserOnly="true" /> in my config.xml, so there shouldn't be a problem with this.

LATER EDIT: On Android the Google link doesn't work at all and the generated one opens inside the app... Apparently device.platform is always null, but the device plugin is added in xml as I can see in phonegap build this list of plugins:

Installed Plugins

Apps will be built with the latest version of a plugin unless you lock the version in your config.xml (see below). -- Plugin installed as a dependency of another plugin

Third Party VERSION LATEST VERSION

com.phonegap.plugin.statusbar        1.1.0  1.1.0

PhoneGap Core

org.apache.cordova.device        0.2.8  0.2.8
org.apache.cordova.inappbrowser      0.3.3  0.3.3

LATER EDIT:

Device.platform doesn't seem to be working, so I modified my function, adding Ved's suggestion, to:

function openBrowser(url){

if(navigator.app)
        navigator.app.loadUrl(url, {openExternal:true});
    else {
        var ref = window.open(url, '_system', 'location=no');

    ref.addEventListener('loadstart', function(event) {

    });
    ref.addEventListener('loadstop', function(event) {
         console.log(event.type + ' - ' + event.url);

    });
    ref.addEventListener('exit', function(event) {

    });
    }

}

on iOS still opens inside the app. For Android I think it's working fine.

Answer 1

I fixed my issue.

I was adding cordova.js in my html. Apparently this broke things.