PhoneGap: Open external link in default browser (outside the app)

Question

I\'m trying to open links in Safari (on an iPhone) from a PhoneGap application. I\'m using PhoneGap version 3.1.0, and use PhoneGap Build, to build the application.

Answer 1

This worked perfectly for me on iOS.

As mentioned in the link above:

1- Install the plugin using the command:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git 

2- And in the HTML file, use one of the following as needed:

window.open(‘http://example.com’, ‘_system’);   Loads in the system browser 
window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view 

Answer 2

I adapted pastullo's answer to work also in a WebApp that might be opened in a cordova InAppBrowser, but also als plain Web-App (e.g. for testing):

function initOpenURLExternally() {
    $("a[target='_blank'],a[target='_system']").each(function (i) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href !== "#") {
            $this
                .attr("onclick", "openURLExternally(\"" + href + "\"); return false;")
                .attr("href", "#");
        }
    });
}

function openURLExternally(url) {
    // if cordova is bundeled with the app (remote injection plugin)
    log.trace("openURLExternally: ", url);
    if (typeof cordova === "object") {
        log.trace("cordova exists ... " + typeof cordova.InAppBrowser);
        if (typeof cordova.InAppBrowser === "object") {
            log.trace("InAppBrowser exists");
            cordova.InAppBrowser.open(url, "_system");
            return;
        }
    }

    // fallback if no cordova is around us:
    //window.open(url, '_system', '');
    window.open(url, '_blank', '');
}

Answer 3

I am using the cordova 6.0, here is my solution:

1: Install this cordova plugin.

cordova plugin add cordova-plugin-inappbrowser

2: add the open link in the html like following.

<a href="#" onclick="window.open('https://www.google.com/', '_system', 'location=yes');" >Google</a>

3: this is the most importaint step due to this I faced lots of issue: download the cordova.js file and paste it in the www folder. Then make a reference of this in the index.html file.

<script src="cordova.js"></script>

This solution will work for both the environment android and iPhone.

Answer 4

You should use the gap:plugin tag and the fully qualified id in your config.xml to install plugins:

<gap:plugin name="org.apache.cordova.inappbrowser" />

As documented here.

Answer 5

In case you are trying to open link in external web browser try using class="external" for Anchor tag.

<a class="external" href="www.google.com" >Link</a>

Hope this helps!

Answer 6

How about this?

<a href="#" onclick="window.open(encodeURI('http://www.google.com/'), '_system')">Test link 2</a>

EDIT:

This may pertain: How to call multiple JavaScript functions in onclick event?

I was thinking, how about this:

Add to code:

$(".navLink").on('tap', function (e) {
    //Prevents Default Behavior 
    e.preventDefault();
    // Calls Your Function with the URL from the custom data attribute 
    openUrl($(this).data('url'), '_system');
});

then:

<a href="#" class="navLink" data-url="http://www.google.com/">Go to Google</a>