1. CIS 136 Building Mobile Apps
In-App Browser
CIS 136 Building Mobile Apps

2. InApp BrowserPlug-in
opens a browser window within the app container rather than the system’s browser installed in the device
no external browser needed to open links in the application
Process stays within the app
avoids pop ups popping up every time
Benefits: 
It gives you the ability to access web content within the application itself
You don’t need to open the documents, pdf’s or web pages in any external browser
Very easy to use and works exactly like any other browser

3. behaves like a standard web browser can't access Cordova APIs
recommended to load third-party (untrusted) content, instead of loading that into the main Cordova webview
not subject to the whitelist, nor is opening links in the system browser.
The InAppBrowser provides by default its own GUI controls for the user (back, forward, done).

4. App and in-Browser

5. plug-in: org.apache.cordova.inappbrowser
cordova.InAppBrowser.open(url, target, options);
url: the url to the website to load
Target: whether url is going to open in Cordova’s Web view.
_self: url is going to get open in the same window.
_blank: url is going to get open in the new window.
_system: url is going to get open in the system’s browser.
Options:
location: It is used to turn on and off the in-app browser’s location bar.

6. Additional Useful Android options
clearcache: set to yes to have the browser's cookie cache cleared before the new window is opened
closebuttoncaption: set to a string to use as the close button's caption instead of a X. Note that you need to localize this value yourself.
closebuttoncolor: set to a valid hex color string, for example: #00ff00, and it will change the close button color from default, regardless of being a text or default X. Only has effect if user has location set to yes.
footer: set to yes to show a close button in the footer similar to the iOS Done button. The close button will appear the same as for the header hence use closebuttoncaption and closebuttoncolor to set its properties.

7. Additional Android options
footercolor: set to a valid hex color string, for example #00ff00 or #CC00ff00 (#aarrggbb) , and it will change the footer color from default. Only has effect if user has footer set to yes.
hardwareback: set to yes to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is yes, so you must set it to no if you want the back button to simply close the InAppBrowser.
hidenavigationbuttons: set to yes to hide the navigation buttons on the location toolbar, only has effect if user has location set to yes. The default value is no.
hideurlbar: set to yes to hide the url bar on the location toolbar, only has effect if user has location set to yes. The default value is no.

8. Additional Android options
navigationbuttoncolor: set to a valid hex color string, for example: #00ff00, and it will change the color of both navigation buttons from default. Only has effect if user has location set to yes and not hidenavigationbuttons set to yes.
toolbarcolor: set to a valid hex color string, for example: #00ff00, and it will change the color the toolbar from default. Only has effect if user has location set to yes.
lefttoright: Set to yes to swap positions of the navigation buttons and the close button. Specifically, navigation buttons go to the left and close button to the right.
zoom: set to yes to show Android browser's zoom controls, set to no to hide them. Default value is yes.

9. Code example window.open = cordova.InAppBrowser.open;
var ref = window.open(‘ '_blank', 'location=yes'); OR
var ref = cordova.InAppBrowser.open(' '_blank', 'location=yes');