Apache Cordova / Phonegap InAppBrowser Tutorial with Example

apache-cordova-phonegap-inappbrowser-example
apache-cordova-phonegap-inappbrowser-example
apache-cordova-phonegap-inappbrowser-example

Apache 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.

Installing InAppBrowser Plugin

To use Apache Cordova / Phonegap InAppBrowser we need to add a plugin. you can add a plugin using these command

For Apache Cordova version 5.0+

cordova plugin add cordova-plugin-inappbrowser

For Older Version

cordova plugin add org.apache.cordova.inappbrowser

 

Working with InAppBrowser

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

Apache Cordova / Phonegap InAppBrowser Example

var ref = cordova.InAppBrowser.open('https://phonegappro.com', '_blank', 'location=yes');
(or)
var ref = window.open('https://phonegappro.com', '_blank', 'location=yes');

How to Open Link in External Browser using Phonegap / Apache cordova ?

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

 

Realtime usage / example of Apache Cordova / Phonegap InApp Browser Plugin :

  • Payment Gateway Integration.
  • Use InAppBrowser instead of IFrame.
  • You can use InAppBrowser for Loading Untrusted third party Content
  • Know more ? please comment below

Supported Platforms :

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Firefox OS
  • iOS
  • Windows 8 and 8.1
  • Windows Phone 7 and 8
  • Browser
  • Great tuto

  • Khalid Almoulani

    Hello there, Thanks for the tutorial! 😀 , I was wondering do I need to use node.js to install any phonegap plugin? or is there another way around?

    • If you’re using CLI (command line) mode for building your app, you need to install NodeJS. you can also use build.phonegap.com (cloud based environment)

  • Joseph Ephrem

    Hello, is ut possible to get cookies values from InAppBrowser. if so how can i get that

    • I’m not sure about cookies, but you can get some value using InAppBrowser

  • Mahalakshmi C

    Open Link in External
    i added this.but the location bar isn’t removed..Any body know the reason for this

  • Mahalakshmi C

    cordova.InAppBrowser.open(‘http://phonegappro.com’, ‘_system’, ‘location=no’)
    i added this.but the location bar isn’t removed..Any body know the reason for this

    • Don’t forget to add plugin

      • Mahalakshmi C

        i added the plugin. if i not added the plugin. it throw the error. but it didn’t throw any error.
        this will be only worked on _blank only. (eg:cordova.InAppBrowser.open(‘http://phonegappro.com’, ‘_blank’, ‘location=no’) )

        • Mahalakshmi C

          please help me…