phonegap - open link in browser

Question

I use phonegap (cordova 2.2)

I have link like this :

<a href="http://twitter.com/foobar" target="_blank">twitter</a>

On iOS - it opens link in browser(Safari)

But on Android - it opens inside webview(inside my phonegap app)

Is there a way to make Android work same way as iOS ?

Answer 1

This is how I got it working using Cordova 2.2 and jQuery mobile on Android

Javascript:

$('.link').live('tap', function() {
    url = $(this).attr("rel");   
    loadURL(url);
});

function loadURL(url){
    navigator.app.loadUrl(url, { openExternal:true });
    return false;
} 

html:

<a href='#' class='link' rel='http://www.someurl.com'>Go Somewhere</a>

Answer 2

Try this for android:

function loadURL(url){
    navigator.app.loadUrl(url, { openExternal:true });
    return false;
} 

Html:

<a click="loadURL('http://twitter.com/foobar')">twitter</a>

You can also try this in your config.xml:

<access origin="*twitter.com" browserOnly="true"/> 

Answer 3

The link provided by user1879822 was actually the most useful one for me: https://build.phonegap.com/blog/access-tags

To summarize, PhoneGap has a whitelist of allowed URLs within its config.xml. This means if it has an entry like this ...

<access origin="*" />

... it will attempt to open all links inside its own webview. However if you constrain your whitelist to only specific URLs, then any link to a URL not in that list will automatically open in an external browser, not within your local webview. For example if you constrain it to only this ...

<access origin="http://127.0.0.1*" />

... then the twitter link mentioned in the original question should open in a new external browser.

Answer 4

If you want to use as in the ios version, with target="_blank" attributes:

$(document).on('tap', 'a[target="_blank"]', function(e){
    navigator.app.loadUrl(e.target.href, { openExternal: true });
    return false;
});

Answer 5

Even if this question was asked a while ago I wanted to inform you about the following blod entry which helped me out:

https://build.phonegap.com/blog/access-tags

In android all I had to to was to unwhitelist my specified domain. So in my config.xml I do not have any ` at all.

Answer 6

I use this as a general rule:

$('a').live('tap',function(e){
    // if external link then open a browser
    if(String($(this).attr('href')).substring(0,4)=='http' || String($(this).attr('href')).substring(0,5)=='https'){
        navigator.app.loadUrl($(this).attr('href'), { openExternal:true });
        e.stopPropagation();
        return false;
    }
});

Answer 7

I had the same exact problem and I noticed that most of the answers are mixed up for different platfoms. The solution works for me is Detail Explanation for different platforms

Answer 8

This worked for me on ios

                    $("a[target='_blank']").on('tap touch click',function(e){
                        e.stopPropagation();
                        e.preventDefault();
                        window.open($(this).attr('href'), "_system");
                        return false;
                    });

Answer 9

Navigator for phonegap works!

handler: function (btn, evt) {
loadURL('http://www.google.com');
}

...

function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}