Open External Link using Cordova

Hey!

Have you ever think about opening an external link from your cordova apps? or loading a web page inside your PhoneGap application ? Here is a solution, you can use cordova-plugin-inappbrowser for that.

Plugin page: http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

Cordova (PhoneGap) InAppBrowser is used for Loading Child Browser in your application (which cannot access cordova api like camera, contacts ..etc) for loading third party (untrusted) content. This provide some default UI controls such as back, forward, done.

Why we need InAppBrowser?

  • You can load Payment gateway pages
  • Load like Iframe
  • load 3rd party websites / web pages

Getting Started

Let’s start!

First we need to create new cordova / PhoneGap project & add inappbrowser plugin

cordova create InAppBrowser
cd InAppBrowser
cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-inappbrowser</span>

Syntax var ref = cordova.InAppBrowser.open(url, target, options);

where

url – your target url.use encodeURI() for UniCode Characters

target

  • _self : Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser .
  • _blank : Opens in the InAppBrowser .
  • _system : Opens in the system’s web browser.

options: Options for the InAppBrowser . Optional, defaulting to: location=yes

cordova-plugin-InAppBrowser examples

Open external link as child browser: This code will open a current link with child browser

<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"cordova.InAppBrowser.open('https://codesundar.com', '_blank', 'location=yes');"</span>></span>Open Child Browser<span class="hljs-tag"></<span class="hljs-name">a</span>></span>

Opening System browser: If you want to open a link with external browser (system browser) you can use this code

<<span class="hljs-keyword">a</span> href=<span class="hljs-string">"#"</span> onclick=<span class="hljs-string">"cordova.InAppBrowser.open('https://codesundar.com', '_system', 'location=yes');"</span>>Open Link <span class="hljs-keyword">in</span> External</<span class="hljs-keyword">a</span>>