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?

Answer 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 >>

Answer 2

Late answer,but may be it can help someone.

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

Cordova 3.3.1

Answer 3

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

Answer 4

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.

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

Answer 6

用这个

window.open('http://www.myurl.nl', '_blank', 'location=yes');