Implementing inAppBrowser into a Cordova PhoneGap Project


If you want to link to an external site and make it easy for the user to return to your PhoneGap app, try the well-named inAppBrowser (IAB for short). Here are the simple steps to implement it into an already-working PhoneGap project for iOS and Android.

You’ll need to style your external links with JavaScript. Instead of …

<a href="http://bit.ly/iphonedevlog">Click here</a>

use …

<a href="#" ontouchend="window.open('http://bit.ly/iphonedevlog','_blank','location=yes','closebuttoncaption=Return');">Click Here</a>

or as a button …

<input type="button" id="button1" onclick="window.open('http://bit.ly/iphonedevlog','_blank','location=yes','closebuttoncaption=Return');" value="Click Here">

Options (these work in Android and iOS):

_blank: Opens in the IAB. This is used in the example above. Replace _blank with any of the following if necessary:
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_system: Opens in the system’s web browser.

location=yes: This is used in the example above. It displays the full URL of the page in the inAppBrowser in a location bar. This is the default IAB behavior, so if you leave the option out, IAB will show the location bar. Replace yes with no to refrain from displaying the location bar: location=no

Captioning the Done button:
The default return button in the IAB is to display the word “Done” in the button. I changed it to Return in the example above. I notice that when I used this option in the first of my links, all the following links on the page (which omitted this option) adopted the same wording as the first link. You can change it to another word by adding your own text after the equal sign: closebuttoncaption=

There are many more options for the IAB, especially for iOS. See one of the resource links at top.

1. Download the plugin. In your project’s folder in Terminal, type the add command::

cordova plugin add cordova-plugin-inappbrowser --save

2. Above all of your other js scripts between your <head> tags, put:

< script src="cordova.js"></script> 
< script type="text/javascript" charset="utf-8">


function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}

// cordova is ready
//
function onDeviceReady() {
 
}
</script>

(My WordPress site is no longer displaying scripts when the angled brackets are closed, so I put a space after the first angled bracket like this: < script> so the whole script would display.)

3. Change your <body> to execute the script to …

<body onLoad="onLoad()">

4. Create the file and test on your device.

12 thoughts on “Implementing inAppBrowser into a Cordova PhoneGap Project

  1. Ahoy there! Great info!

    One question though. I’m created a side panel through jQM (The sliding thing). Is it possible that whenever links are opened, the app’s menus still be accessible? Somehow, simply “embedding” the inappbrowser instead of launching a full screen one?

  2. Steve, I am stuck!

    I have gotten a simple iOS app on to Testflight. The app goes to my wordpress page but I am having a hard time figuring out how to get links to open in the inapp viewer.

    The biggest hurdle is getting all of my external links to read like this or anytime someone clicks an external link they are stuck on the external page:

    Click Here

    I cant find a plugin to automatically do this. Any suggestions.

  3. The click here in my last comment is really all external links to have: onclick=”window.open(‘http://bit.ly/iphonedevlog’,’_blank’,’location=yes’,’closebuttoncaption=Return’);

  4. Pingback: Using Cordova CLI on Mac OS X Mavericks to build iOS apps (8/2015) | iPhone Dev Log

  5. Pingback: Using Cordova 5.0 CLI on Mac OS X Mavericks to build Android apps | iPhone Dev Log

    • I can’t help you. I am not familiar with that plugin. Also, next time you want help online, you need to give your environment and what exactly you are trying to do. No one could help you with the little amount of information you have given here.

Leave a reply to Diriye Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.