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 ?

Comintern

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>

Exalt

Great to know this.. this worked for me using Cordova 2.3, jQuery Mobile on Android. – Conciseness

Live is deprecated. Hell, I thought it was removed in more recent versions of JQ. I'd go with using delegate or the on method but delegation style. Actually, so is delegate, but much more recently. – Wivern

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"/> 

Cadent

Worked for me with onclick instead of click. The property click doesn't exist, or does? – Wedding

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.

Assignation

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;
});

Mcclean

Answer 5

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;
    }
});

Fullblooded

FYI, your https comparison is redundant, it will always evaluate to true in the first expression. :) – Coriolanus

actually, it's meant to detect if it is an external link or not. but yeah, you're right. :) – Fullblooded

Answer 6

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

Noyes

Please edit your answer so it provides all relevant text here and provide the link as more detailed backup information. That also keeps the answer useful even if that links becomes invalid – Bemis

Answer 7

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.

Trinidadtrinitarian

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;
                    });

Alleged

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;
} 

Knockwurst