External links to open InAppBrowser or System Browser in Phonegap webView application

I had a problem in my phonegap application that open external link within my application. The problem is that my webview page was replaced by external link. What I wanted is that my external link should open up on safari or system browser instead.

So, to resolve the issue here's what I did.

First, we need to add cordova.js in all our pages. The latest cordova.js or phonegap.js can be downloaded from the phonegap website - http://www.phonegap/install.

<script src="js/cordova.js" type="text/javascript"></script>


You might need to install the inappbrowser plugin if needed but I believe on the latest cordova version, this was already part of the framework but just in case you needed, you can execute this command via console on your application directory to install the plugin.

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

Next, is to add the 2 javascript function below. I have here 2 function to choose from whether you want the link to open InAppBrowser or System Browser.

<script type="text/javascript" charset="utf-8">
    function openURLInApp(href) {
        var w = window.open(href, '_blank');
        w.opener = null;
        w.document.write('<META HTTP-EQUIV="refresh" content="0; url='+href+'">');
        w.document.close();
    }

    function openURLToBrowser(href) {
        var url = encodeURI(href);
        window.open(url, '_system');
    }
</script>


Finally, we need to call the function above on every external link we want to open on either system browser or in app browser. Please see below.

<a href="#" onclick='openURLInApp("http://www.google.com");'>Google</a>


Hope this will help a lot on developing device application. Happy coding!!