Open External Links using cordova-plugin-inappbrowser

cordova-inappbrowser-example

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: https://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 add android
cordova plugin add cordova-plugin-inappbrowser

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

<a href="#" onclick="cordova.InAppBrowser.open('https://codesundar.com', '_blank', 'location=yes');">Open Child Browser</a>

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

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