PhoneGap Build: how to open external url in device browser on Android?

Question

External URL's don't open in the system's browser in my PhoneGap Android application. I'm using PhoneGap Build 2.3.0.

According to the Cordova documentation I used target '_system':

window.open('http://www.myurl.nl', '_system');

In my config.xml I have:

<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
<access origin="*" browserOnly="true" />

But still the links open in my apps webview.

How to solve this?

Solution 1

It's not the answer when you want to keep using PhoneGap Build, but I solved the problem by setting up a development environment for Cordova (PhoneGap) on my machine and compiling the app locally. In Cordova 2.5.0 window.open('http://www.myurl.nl', '_system'); works perfect, it will open the link in the system's browser.

So my advice is to stop using PhoneGap Build and start compiling your app locally. Here's how to set up your development environment for Cordova >>

Solution 2

Late answer,but may be it can help someone.

navigator.app.loadUrl('https://google.com/', { openExternal:true });

Cordova 3.3.1

Solution 3

This worked for me. Phonegap 3.1.0.

html code:

<a id="ext-link" href="#">Google it</a>

or

<button id="ext-link" href="#">Google it</button>

Javascript (with jQuery+cordova):

$("#ext-link").on("click"), function() {
    if (typeof navigator !== "undefined" && navigator.app) {
        // Mobile device.
        navigator.app.loadUrl('http://www.google.com/', {openExternal: true});
    } else {
        // Possible web browser
        window.open("http://www.google.com/", "_blank");
    }
});

Hope that helps.

Solution 4

This question is now a little old, but I felt it was worth updating. This now works fine with PhoneGap Build when used with 2.9.0.

I have compiled and tested it on Android 4.3 and iOS 6.1.3. I do not have the InAppBrowser plugin in my app as that's to open pages in the app, rather than cause the native browser to open them, and I only have the following for the access tags:

<access origin="http://127.0.0.1*"/>
<access origin="http://phonegap.com" subdomains="true" />

Solution 5

@George Siggouroglou: It's not a good idea to use an id for elements that eventually will appear more than one time in a document. Instead, its good practice to make the code more modular.

if expecting touch devices its also a good choice to use "tap" before "click" because it fires much faster and earlier than a click. to check touch capable stuff I prefer to use modernizr because it makes feature detection a breeze.

The jQuery Mobile tap event triggers after a quick, complete touch event that occurs on a single target object. It is the gesture equivalent of a standard click event that is triggered by the release state of the touch gesture. https://api.jquerymobile.com/tap/

hope that helps someone

**html code:**

<a class="ext-link" href="#">Google it</a>

or

<button class="ext-link" href="#">Google it</button>

Javascript (with jQuery):

//define tap or click event type on root level (can be combined with modernizr)
iaEvent = "click";
if (typeof navigator !== "undefined" && navigator.app) {
   iaEvent = "tap";
}
$('.ext-link').each.bind(iaEvent, function() {
    if (typeof navigator !== "undefined" && navigator.app) {
        // Mobile device.
        var linktarget = this.attr("href");
        navigator.app.loadUrl(linktarget, {openExternal: true});
    } else {
        // Possible web browser
        window.open(linktarget, "_blank");
    }
});

View more solutions

Comments

[realtebo]

Can you exaplain what could be the difference from local compile and phonegap build ?

[Joan]

Mostly the difference is in the settings. When you compile locally, it's easier to change certain settings. But because Cordova 2.5 on PhoneGap Build doesn't yield the same results as when installed locally, there must be some difference in the core code, but have no idea why.

[Ian Jamieson]

This was quite buggy for me, my app would load multiple tabs even though the link was only clicked once!

[Ian Jamieson]

Me too, I ended up using Hammer JS to listen for tap events, this prevented the link from being opening multiple times.

[Keith]

Buggy for me on Android. The link opened in the browser but then the app came back into focus.

[Dimitri]

didn't help me 04-11 11:47:48.186: E/Web Console(22063): Uncaught TypeError: Cannot call method 'loadUrl' of undefined:88

[Dimitri]

Why did you vote down this comment ? If you check on phonegap website, this command line is a c/p of InAppBrowser install guide... github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/… Your profil should be voted down too

[Tom McKenzie]

You should have mentioned your solution requires the InAppBrowser plugin to work. Otherwise it will not.

[Rahmathullah M]

with phonegap 3.0, android cli build

[Alen Giliana]

Thanks for the tip 'location=yes'. I saw elsewhere it was =no and i couldn't get it to work.

[gregtzar]

Answer is backwards... Passing _blank explicitly instructs Cordova NOT to open it in the system browser!

[Sebastien Lorber]

@Joan really I'm not sure it's a phonegap build problem. Are you sure you use the appropriate plugin declaration and the plugin is effectively loaded in your app with Phonegap? I've seen people using gap:plugin instead of plugin tag it's worth trying