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 theInAppBrowser
._blank
: Opens in theInAppBrowser
._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>>